一般的な CSS 互換性問題の解決策-jsチュートリアル-php.cn

一般的な CSS 互換性問題の解決策

php中世界最好的语言

リリース： 2018-03-14 13:47:52

オリジナル

1900 人が閲覧しました

这次给大家带来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 ブラウザの互換性をテストできる IETester を使用することをお勧めします。最も一般的な方法は、if ステートメントまたは三項演算子を使用して解決することです。残りは、個々の属性に違いがあるということです。解決策は自分でコツコツ貯めていくこと！

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドページをテストする方法

JavaScriptでのcallとapplyのアプリケーション

Spring Bootのスケジュールされたタスクの使用方法

以上が一般的な CSS 互換性問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。