- 常见浏览器兼容问题
(1)浏览器默认的margin和padding不同
解决方案:加一个全局的 *{margin:0;padding:0;} 来统一;
(2)E6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。
box{ float:left; width:10px; margin:0 0 0 10px;}
这种情况之下IE会产生20px的距离
解决方案:在float的标签样式控制中加入 display:inline; 将其转化为行内属性。( 这个符号只有ie6会识别);
(3)渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用 “+” 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
.bb{
background-color:#f1ee18; /所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff; /IE6、7识别/
_background-color:#1e0bd1; /IE6识别/
}
(4)IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
(5)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决;
(6)超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了
解决方法:改变CSS属性的排列顺序 L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
(7)漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。推荐不要忘记书写 ;
(8)利用浮动使父元素高度无法撑开而影响和父元素同级的元素,解决办法:给父元素添加clearfix样式
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
2.对语义化标签的理解
(1) 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
(2) 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
(3) 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
(4)便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
3.清除浮动的方法
(1)clear:both;
(2)利用after伪类:
parent:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;}
(3)浮动外部元素;
(4)将overflow设置为auto或者hidden;
4.iframe的用法
iframe 元素会创建包含另外一个文档的内联框架(即行内框架);
例如:
一些老的浏览器不支持 iframe。
如果得不到支持,iframe 是不可见的。
优点:
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. 并行加载脚本
缺点:
1. iframe会阻塞主页面的Onload事件
2. 即时内容为空,加载也需要时间
3. 没有语意