일반적인 CSS 호환성 문제에 대한 솔루션-JS 튜토리얼-php.cn

일반적인 CSS 호환성 문제에 대한 솔루션

php中世界最好的语言

풀어 주다： 2018-03-14 13:47:52

원래의

1898명이 탐색했습니다.

这次给大家带来CSS的常见兼容性问题解决方案，CSS常见兼容性问题的注意事项有哪些，下面就是实战案例，一起来看一下。

一、不同浏览器的标签默认的外补丁和内部顶不同

这个大家就很常见了，我们知道每个浏览器对margin和padding的处理问题很大，我们一般都会碰到这个问题，常用的解决办法就是使用通配符*来将其初始化
解决办法：

*{    margin：0；    padding:0;}1234

로그인 후 복사

另一种方法建议大家使用的就是使用reset文件，其不仅省心外，还有的两个好处就是方便程序员的的发挥和便于发现前端代码的遗漏。

二、块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div的float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。问题出现的症状就是iE6通常后面的一块会被挤下去，如果你的代码比较复杂，这个问题将很容易碰到，这是float布局中最常见的问题，

解决方案：
在float的标签样式控制中加入display:inline;将其转化为行内属性

三、cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

四、 innerText在IE中能正常工作，但在FireFox中却不行.

if(navigator.appName.indexOf("Explorer")   >   -1){        document.getElementById(&#39;element&#39;).innerText =   "my text";
}   else{        document.getElementById(&#39;element&#39;).textContent =   "my   text";
}12345

로그인 후 복사

五、 CSS透明

IE：
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。1
FF：
opacity:0.6。1

로그인 후 복사

六、css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

七、FF和IE的盒子模型解释不一致导致相差2px

box.style{    width:100;    border 1px;}1234
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102 //加上边框2px

로그인 후 복사

八、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

解决办法，我们可以让通过javascript设置。

九、超链接访问后hover样式不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

a:link{};a:visited{};a:hover{};a:active{};1234

로그인 후 복사

十、form标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}

十一、图片间距的问题

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了 *{margin:0;padding:0;}的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

十二、IE6不支持fixed

解决办法

.DIV名称{height: 92px;width: 100%;position: fixed;top: 0;_position: absolute;_bottom: auto;_top:expression(eval(document.documentElement.scrollTop));}123456789

解释_是专门用来解决兼性设置的，里面还是通过eval解析javascript代码来设置javascript代码。

十三、IE个版本的hack

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：针对所有IE：

   /*类内部hack：*/
    .header {_width:100px;}            /* IE6专用*/
    .header {*+width:100px;}        /* IE7专用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9专用*/
    /*选择器Hack：*/
    *html .header{} /*IE6*/ 
    *+html .header{}/*IE7*/12345678910111213

로그인 후 복사

总结：

많은 호환성 문제는 IE 브라우저와 관련되어 있습니다. IE 브라우저의 다양한 버전의 호환성을 테스트할 수 있는 IE 호환성 테스트 소프트웨어인 IETester를 사용하는 것이 좋습니다. 가장 일반적인 방법은 if 문이나 삼항 연산자를 통해 해결하는 것인데, 나머지는 개별 속성에 차이가 있다는 것입니다. 해결책은 스스로 천천히 쌓아가는 것!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!