html+css兼容性要点
来源:互联网 发布:淘宝商品品控下架 编辑:程序博客网 时间:2024/06/06 10:07
1、 !important的原理;
!important只有Ie7.0、IE8和firefox可以识别,但是Ie6.0不能成功应用.
例:border:1px solid #f00 !important; border:2px solid #f00;
之所以把!important放在第一个border 设置,是因为它把这次border的优先级提高了,即使后面再一次甚至再N次设置border 也无效,但是Ie6.0对这个规则不接受,而导致它应用了第二次的border 设置,也就是第二次覆盖了第一次的这一原理, 并不是它不识别!important;所以它的border为2 像素的红框.
2、 *的原理
IE6、IE7、IE9都能识别*,而标准浏览器FF、IE8是不能识别*的;
例:border:2px solid #f00;*border:1px solid #f00;
之所以把*放在后面是因为ff和IE8不识别*而导致只对它设置了一次border;而ie 其他系列进行了两次border设置后,后一个属性覆盖了前一个属性,故为一像素的边框。
3、 _的原理
除IE6支持_外,FF+IE8+IE7都不支持_;
例:border:2px solid #f00;*border:1px solid #f00; _ border:3px solid #f00;
_放在后面,只有IE6能识别,所以IE6边框为3、IE7、IE9边框为1,FF、IE8边框为2;
4、 Hack示例
所有hack,所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;
IE7 专用 *+height: 100px;
IE7、FF 共用 height: 100px !important;
(1)区别FF(IE8)与IE6 IE7
backgorund:orange; FF和IE8背景色将为橘黄色
*backgrund:red; IE6和IE7背景色将为红色
(2)区别FF(IE8)与IE6与IE7
background:orange; FF和IE8背景色将为橘黄色
*background:red !important; IE7背景色将为红色
*background:blue; IE6背景色将为蓝色
(3)区别FF(IE8)与IE6与IE7
background:orange; FF和IE8背景色将为橘黄色
*background:red; IE7背景色将为红色
_background:blue; IE6背景色将为蓝色
提示:CSS HACK书写顺序:先写FF(IE8)所要的样式,接着是IE7的,再接着才是IE6的!
总结:实际运用中我感觉比较少用到!important ,只要你记住"*"和"_"我想就足够区别于FF(IE8)与IE6与IE7了.
5、 IE7、IE8区分
使用<meta http-equiv="x-ua-compatible" content="ie=7" />强制将IE8转化成IE7标准(将IE8使用IE7进行渲染);
6、 div垂直居中问题
添加line-height属性后,IE各版本、FF、Opera、Chrome都能实现垂直居中;
7、 设置了float属性的第一个div的margin加倍问题
IE6中存在的bug;
最好的解决方法是利用!important,例:margin-left:10px !important; margin-left:5px;
另外设置display:inline;也可以解决,但是块元素将变成内联元素,不方便;
8、 清除浮动
有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下:
<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
9、 html开头添加*{margin:0px;padding:0px;}能有效解决各浏览器某些标签的默认值不同问题;
10、 页面整体居中问题
页面整体居中需要:
(1) 在body后用一个大的div把所有div包括进来;
(2) 大div的宽度必须设置为绝对宽度,不能用相对宽度;
(3) 若FF整体居中必须设置body{text-align:center},并且设置大div的{margin:0 auto;
11、 若需给 a 标签的内容加上样式, 需要设置 display: block;(常见于导航标签)
12、 ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明list-style:none, 以避免不必要的麻烦. (常见于导航标签和内容列表);
13、 外部的div最好不要死定高度,让外部div的高度自适应;
14、 div高度自适应及注意问题
(1) 如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小;(父div的长宽都自适应子div)
(2) 如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both;或者给父div加上float属性;(父div只有长度自适应子div,宽度默认为上一级宽度);
15、 无任何内容的td标签设置的边框样式在IE中无效,但在FF、chrome中正常。
若要是无内容的td边框样式在IE下也有效,那么设置样式:table{border-collapse:collapse;} 还可以在设置了table的前提下设置td{empty-cells:show;}
- html+css兼容性要点
- HTML+CSS要点总结
- HTML/CSS的知识要点
- HTML/CSS知识要点总结
- DIV CSS网页布局兼容性的要点与诀窍总
- IE和Firefox浏览器的css兼容性要点
- css网页布局兼容性有哪些要点与诀窍
- DIV CSS网页布局兼容性有哪些要点与诀窍
- IE兼容性处理要点
- 浏览器兼容性处理要点
- css兼容性
- css兼容性
- CSS兼容性。
- CSS兼容性
- CSS兼容性
- css兼容性
- css 兼容性
- CSS兼容性
- symfony
- TCP的TIME_WAIT与CLOSE_WAITE状态
- 7、单播多播
- 每天深入android一点点 ^.^
- 是谁还在返回栈指针?(人生就是这样,笑笑别人,再被别人笑笑)
- html+css兼容性要点
- java.lang.NoClassDefFoundError: org/hibernate/internal/util/xml/Origin
- 优秀源码下载网站排行
- 严蔚敏版数据结构例1-7实例
- 单片机LY5A-L1B开发板笔记(3)
- Spring JDBC Framework详解——批量JDBC操作、ORM映射
- 嵌入式bootloader开发之四(Tiny 6410)
- Code Forces 342 A. Xenia and Divisors 思维+暴力
- 基于调度器实例-发邮件