侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

总结前端的兼容性问题

2024-05-09 星期四 / 0 评论 / 0 点赞 / 82 阅读 / 2472 字

1 浏览器默认的margin和padding不同解决办法:在css上加上这句*{margin:0; padding:0}2 ie6双边距问题,有float属性的元素添加的margin或者padding

1 浏览器默认的margin和padding不同解决办法:在css上加上这句

*{margin:0; padding:0}

2 ie6双边距问题,有float属性的元素添加的margin或者padding会翻倍解决办法:如果想要margin为20px,根据只有ie6能识别属性前缀“_”的原理,则解决代码如下:

.class{margin:20px; _margin:10px}

3 ie5和ie6让定宽的div水平居中,需要给父级样式添加

_text-align:center;

4 为了兼容ie7及以下版本,表单元素命名需要注意:不要使用与form属性同名的name或id;其他元素的id也不要和form表单内元素的name相同;注:只有ie7能识别属性前缀“*”;

5 注:只有ie8能识别属性值后缀“/0”;只有ie6、7、8浏览器能识别属性值后缀“/9”;例如:

select { background-color:red/0; /* ie 8/9*/ background-color:blue/9/0; /* ie 9*/ *background-color:#dddd00; /* ie 7*/ _background-color:#CDCDCD; /* ie 6*/ } 

6 ie绑定事件的专有方法是attachEvent(),但ie11却不支持;只要高于ie8,都支持addEventListener()方法;解决方法,使用javascript高级程序设计的EventUtil对象绑定事件;

7 ie的透明度有兼容bug,比如完全透明,其他浏览器只需opacity:0;而ie却需要filter:alpha(opacity=0);

8 chrom中文界面下默认会把小于12px的文本强制按照12px;

9 针对各种浏览器不支持css3的一些新属性使用-ms-,-moz-,-webkit-前缀例如:

.transform5 {    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -ms-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;   /*标准写法放在最后*/}

-webkit- 是webkit内核识别码,例如谷歌;**-ms- ** 是ie内核识别码;-moz- 是firefox内核识别码;-o- 是opera内核识别码;因为有些像transition这种css3的样式,一些老版本的浏览器是不支持直接写

transition:all 1s ease-in-out;

而是要加上相应的前缀的

广告 广告

评论区