说说你所知道的各浏览器存在的兼容问题?

最新推荐文章于 2021-02-22 11:33:09 发布

卿卿qing

最新推荐文章于 2021-02-22 11:33:09 发布

阅读量211

点赞数

分类专栏： PC 文章标签：常见兼容性问题？

本文链接：https://blog.csdn.net/weixin_43900414/article/details/100159581

版权

7 篇文章 0 订阅

订阅专栏

问题：IE6 双边距 bug，浮动后产生的双倍距离:块属性标签 float 后，又有横行的 margin 情况下，在ie6 显示 margin 比设置的大
解决：是在 float 的标签样式控制中加入 display:inline; 将其转化为行内属性;

问题：IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性，Firefox 下,只能使用 getAttribute() 获取自定义属性.
解决：解决方法:统一通过 getAttribute() 获取自定义属性.

问题：IE 下, even 对象有 x , y 属性,但是没有 pageX , pageY 属性，Firefox 下, event 对象有pageX , pageY 属性,但是没有 x , y 属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的 HTTP 请求数。

问题：Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,.
解决：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

问题：超链接访问过后 hover 样式就不出现了 , 被点击访问过的超链接样式不在具有 hover 和active 了
解决：方法是改变 CSS 属性的排列顺序 : L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度。

行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6 间距 bug
问题症状：IE6 里的间距比超过设置的间距
解决方案：在 display:block; 后面加入 display:inline; display:table;

图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方案：使用 float 属性为 img 布局

标签最低高度设置 min-height 不兼容
问题症状：因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{
   min-height:200px;
   height:auto !important; 
   height:200px; 
   overflow:visible;
}

关注