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
相关文档:
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢?
1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel),相对长度 ......
<style type="text/css">
<!--
input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}
-->
</style>
<body>
<input type="text" name="" />
<input type="text" name="" readonly="readonly" />
expression:处理方式:
  ......
在前端开发中,我们经常遇到这样的情况:服务器传到前端的图片需要缩小以显示(如下),在将其缩放之后,IE中图片效果不容乐观。
<img class="thumb" src=http://www.webyi.com/wschool/wdesign/CSS/20090905/"pic.jpg" alt="This image is really 500x500 big" width="50" height="50" />
IE7支持自定义双三次&ldq ......
Css常用属性:
1. color, background-color:表示颜色的关键字,16进制数(http://www.clagnut.com/blog/260中提供的color
scheme工具)
2. font-family:该属性的值可以是一组字体,按喜欢程度排序的字体列表。一些中文字体的列表:
Windows的一些:
·
新 ......