易截截图软件、单文件、免安装、纯绿色、仅160KB

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盒模型详细讲解

CSS 盒模型
  网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:
  
  如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
  这个图表很好地展示了作用于页面上任意盒子的数值。
  
  注意以上两个例子中,margi ......

详述CSS中单位px和em的区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢?
1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel),相对长度 ......

DIV CSS设计时IE6/IE7/FF 兼容性问题解决篇

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height ......

HTML,CSS编辑器:Crescent Eve

Crescent Eve(http://www.kashim.com/eve/
)是免费的HTML,CSS的编辑器.
和记事本类似,非常简洁.
主要有以下4个功能
   HTML的tag输入提示
   tag属性的输入提示
   HTML的语法检查
   HTML预览
在编辑HTML画面时非常有用.
Crescent Eve是非常小的一个编辑器,操作也非常简 ......

点点滴滴(CSS)

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)*/
    ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号