1. 程式人生 > >Safari瀏覽器對設定的高度不起作用,解決方案

Safari瀏覽器對設定的高度不起作用,解決方案

發現 文字 one 底部對齊 設定 pan select標簽 pro prop

1、在做瀏覽器兼容的時候,發現select標簽在safari蘋果瀏覽器中的高度永遠都是默認的,這時候解決的辦法是加上line-height屬性就可以設置;

2、但加上line-height屬性可以設置高度後你會發現高度變大了,safari瀏覽器對select默認上下邊距padding各多出3px的高度; 比如設置height:24px;safari下面會變成30px;這樣一來,就和別的瀏覽器無法統一了,試過-webkit-appearance:none;但是清掉下拉圖標,文字都成了底部對齊,也不行,曾一度想用div+ul來代替select,又發現這樣真的很麻煩;

3、解決辦法:經過探索發現,safari蘋果瀏覽器有一種特有的寫法從未見過:

input{height:30px;line-height:30px;[;height:24px;line-height:24px;]}

如果Safari瀏覽器的input高度設置不管用,一定要設置line-height,然後去除iOS固有UI樣式:-webkit-appearance: none;

Safari瀏覽器對設定的高度不起作用,解決方案