前端工作遇到问题汇集

最新推荐文章于 2024-09-13 23:32:49 发布

罗勇爱分享

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量52

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/luoyong0201/article/details/132975951

版权

　　兼容性问题：
浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况(也就是浏览器内核不同)

　　1.去掉iframe中横向的滚动条

　　　　解决办法：在加入iframe子页面中添加 html{overflow-x:hidden;}

　　2.ie6中position：fixed不兼容

　　　　解决办法：在固定定位的元素里。。加入_position：absolute；_top：值；_left：值；_right:值；_bottom:值;(根据自己需要设置相应的值)；

　　3.ie中图片有边框

　　　　解决方法：img{ border：none；}

　　4.ie中：hover兼容性问题

解决办法1：只需引用一个文件就行：csshover3.htc(文件在桌面)；此文件必须和html文件在同一目录(要放在一个文件夹下面)；然后调用代码.放到　　　　　　 <head></head>中间:

解决办法2：使用js或jQuery实现。

　　5.IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block

　　　　解决办法：div{display:inline-block;*display:inline;*zoom:1;}

　　6.display:inline-block后元素之间有小间距

　　　　解决办法：可以将元素不换行书写(但可读性差)

　　7.文字贯穿线方法：1：使用html标签<s>111111111111</s>;2:text-decoration:line-through;

　　8.解决透明度兼容问题：

　　　　解决办法1:filter:alpha(opacity=90);opacity: .9;(主要针对ie)

　　　　　　2: filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

　　9.ie兼容border-radius问题：

　　　　解决办法1：如此在需要圆角的css中引用文件behavior: url("ie-css3.htc")，其中ie-css3.htc需要与html文件在同一目录下

　　　　　　　　　　#div1{border: 1px solid red;width: 200px;height: 200px;margin:20px; behavior: url("ie-css3.htc");

　　　　　　　　　　border-radius: 20px;position: relative;z-index: 1000;} <div id="div1"></div>

　　　　解决办法2：引用PIE.htc同上；

　　　　解决办法3：使用图片代替；

　　10.ie中a标签点击后虚线问题:

　　　　解决办法：a{outline：none；border：none；}

　　11.标签最低高度设置min-height不兼容

　　　　解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; 　　　　　　　　　　 overflow:visible;}

　　12.还有一些页面在ie(6-8)下有微小的差距，这时我一般选用css hack来进行微调

　　　　　　IE6：(只是ie6识别)

　　　　　　　　_selector{property:value;}

　　　　　　　　selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

　　　　　　IE7：(只是ie7识别)

　　　　　　+selector{property:value;}

　　　　　　IE8：(只是ie8识别)

　　　　　　selector{property:value\0;}

　　　　　　IE6 & IE7：(只是ie6与ie7识别)

　　　　　　*selector{property:value;}

　　　　　　IE6 & IE7 & IE8：：(只是ie6，ie7，ie8识别)

　　　　　　selector{property:value\9;}

　　13.　　渐变问题： background: -webkit-linear-gradient(left,#216fa0,blue);

　　　　　　　　　　　background: -moz-linear-gradient(left,#216fa0,blue);
　　　　　　　　　　　background: -o-linear-gradient(left,#216fa0,blue);
　　　　　　　　　　　background: -ms-linear-gradient(left,#216fa0,blue);
　　　　　　　　　　　filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#216fa0,endColorstr=blue,grandientType=1);