Safari浏览器对设定的高度不起作用,解决方案

Posted 金牛座的女孩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Safari浏览器对设定的高度不起作用,解决方案相关的知识,希望对你有一定的参考价值。

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浏览器对设定的高度不起作用,解决方案的主要内容,如果未能解决你的问题,请参考以下文章

CSS flexbox布局在Safari中不起作用

退出 html5 全屏模式时 css 媒体查询不起作用 - safari

设置为高度的框:自动不起作用

HTML5 视频加载数据事件在 IOS Safari 中不起作用

HTML5 视频播放/暂停控件仅在 Safari 浏览器中不起作用

jQuery .height 方法无法在 iOS Safari 中设置高度