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

我就是我 2024-04-17 19:21 27阅读 0赞

1.  问题：png24 位的图片在 iE6 浏览器上出现背景  
    解决：解决方案是做成 PNG8

--------------------

1.  问题：浏览器默认的 margin 和 padding 不同。  
    解决：方案是加一个全局的 \*\{margin:0;padding:0;\} 来统一。

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

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