欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

浏览器兼容——国产浏览器下的select的文字高度不同等差异性展现方式

来源: 开发者 投稿于  被查看 42100 次 评论:69

浏览器兼容——国产浏览器下的select的文字高度不同等差异性展现方式


使用bootstrap设置了select,
在QQ浏览器极速模式下的文字内容和360极速模式下的文字内容高度不一致。

经过一番查找,是浏览器内核不一致导致的。

国产浏览器大多是双内核,甚至是三内核。一个Chromium内核,也就是Chrome使用的内核,切换到这个内核的模式一般叫极速模式;一个IE内核,称之为IE模式;有的甚至还有一个修改过的IE内核,称之为兼容模式。

找到的解决方案:【通过meta代码强制浏览器使用WebKit内核】

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器:

<meta name="renderer" content="webkit"/>

强制Chromium内核,作用于其他双核浏览器:

<meta name="force-rendering" content="webkit"/>

如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

兼容性解决方案参考文章

通过meta代码强制浏览器使用WebKit内核_百度经验 https://jingyan.baidu.com/article/0f5fb09924dae56d8334ea16.html

前端开发中的兼容性问题-CSS篇 - CSDN博客 https://blog.csdn.net/Mankii/article/details/78458713

用户评论