DIV+CSS的实质是:使用XHTML对网站进行标准化重构,使用CSS将表现与内容分离。
什么是浏览器HACK:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常。
因此,在网站设计的时候,应该注意css样式在不同浏览器下的兼容性问题,特别是对完全使用DIV+CSS设计的网站,就应该更注意IE6、 IE7以及FF对CSS样式的兼容,不然,你的网页可能出现意料之外的效果。
一、区别不同浏览器的CSS hack写法:
① 区别IE6与FF:
background:orange;*background:blue;
② 区别IE6与IE7:
background:green !important;background:blue;
③ 区别IE7与FF:
background:orange; *background:green;
④ 区别FF,IE7,IE6(一):
background:orange;*background:green !important;*background:blue;
⑤ 区别FF,IE7,IE6(二):
background:orange;*background:green;_background:blue;
下面简单解释一下各浏览器怎样理解这三个属性:
在FF下,第2、3个属性FF不认识,所以它读的是 background:orange; 。
在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性 *background:green; 。
在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是_background:blue; 。
注:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6支持_(下划线),IE7和firefox均不支持_(下划线)。
| IE6 | IE7 | FF |
* | √ | √ | × |
!important | × | √ | √ |
_ | √ | × | × |
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
⑥ 区别FF,IE7,IE6(三):
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、CSS定义需要注意的问题:
1.检查HTML元素(如:<ul>、<div>)、属性(如:class=”")是否有拼写错误、是否忘记结束标记(如:<br />)
因为Xhtml 语法比较严格,诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误,那页面是不能正常显示的。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的着名的bug,倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三、CSS简写用法说明:
简单的说,css简写就是在等效的前提下,把多句css代码简化成一句。在我看来,简写css的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。
能够简写的css属性主要有以下几个:
font
简写:
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序:font-style | font-variant | font-weight | font-size | line-height | font-family
注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。
这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值。
background
简写:
background:#fff url(bg.gif) no-repeat fixed left top;
等效于:
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序:background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写:
margin:1px 0 2em -20px;
等效于:
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序:margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写:
border:1px solid #000;
等效于:
border-width:1px;
border-style:solid;
border-color:#000;
顺序:border-width | border-style | border-color
这三句也是简写,等于是把四边的样式合而为一了。(关于四边的问题,下文有详细说明)
border-top / border-right / border-bottom / border-left
简写:
border-top:1px solid #000;
等效于:
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
(和border一样)
list-style
简写:
list-style:square outside url(bullet.gif);
等效于:
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序:list-style-type | list-style-position | list-style-image
关于四边
有很多样式都涉及到了四边的问题,这里统一说明。
四边的简写一般如下:
padding:1px 2px 3px 4px;
等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
顺序:top | right | bottom | left
不论是边框宽度,还是边框颜色、边距等,只要css样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。
如果四边的值省略一个,只写三个:
padding:1px 2px 3px;
则等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
(省略的“左”值等于“右”)
如果四边的值省略两个:
padding:1px 2px;
则等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
(省略的“下”值等于“上”)
如果只有一个值:
padding:1px;
则等效于:
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;