8个不兼容IE 8的CSS样式写法
Internet Explorer 8预设是以CSS 2.1为标准,并修正了许多Internet Explorer 7的CSS Bug,这意味着有一部份以往依据IE 7所设计的网页,
在IE 8上的呈现会有所出入,所幸拜IE 7相容检视功能所赐,目前因使用IE 8而导致版面错误的网站并不多。
但一值依赖IE 7相容检视功能并非长久之计,尽早将网站修改为IE 8相容才是长久之计,因为毕竟CSS是持续更新的,现在不改,日后大修的机会就更大。
不幸的是,Microsoft官方并未提供关于IE 7及IE 8的CSS差异说明文件,顶多只是告诉我们IE 8目前更趋近于CSS 2.1而非CSS 2.0,因此笔者在造访许多网站后,
规类出8个最常见的差异供读者们参考。
1、起始座標位置
先天上,IE 7与IE 8在预设网页版面的起始位置就不同,以下面的代码来说,在IE 7及IE 8上启始的位置就有差异。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="height:100px;width:200px; border: solid 1px black">
<div>
<a href="http://www.hinet.net">Hinet</a>
</div>
</div>
</body>
</html>
(IE7)
(IE8)
不过由于是整个偏移,对网页的影响相当小。
2、DIV中的P
下面的执行结果呈现了IE 7及IE 8在处理DIV中的P之差异性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="height:100px;width:200px; border: solid 1px black">
<div>
<p>TEST Font</p>
</div>
</div>
</body>
</html>
(IE 7)
(IE
很明显的,IE 8中对于DIV中的P预设位置与IE 7不同,IE 7是将margin-top预设为0px,排在最上方,,IE 8却未预设margin-top,
解决方法是将margin-top加上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
相关文档:
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中,margi ......
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢?
1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel),相对长度 ......
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height ......
Crescent Eve(http://www.kashim.com/eve/
)是免费的HTML,CSS的编辑器.
和记事本类似,非常简洁.
主要有以下4个功能
HTML的tag输入提示
tag属性的输入提示
HTML的语法检查
HTML预览
在编辑HTML画面时非常有用.
Crescent Eve是非常小的一个编辑器,操作也非常简 ......
CSS important
.dialog{margin:4px !important;margin:1px;} /* IE以最后出现的为准, Firefox|Opera|Safari以!important为准 */
CSS DIV半透明
filter: alpha(opacity=50); /*IE支持(范围0-100)*/
opacity: 0.50; /*非IE支持(范围0-1)*/
......