IE8兼容IE7模式代码:X-UA-Compatible详解

1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

3、一个兼容性调整(IE和Mozilla)的笨办法： 初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。 临时解决方法：选择符{属性名:B !important;属性名:A}

4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

5、li标签前面的图标推荐使用background-image，而不是list-style-image。

6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

10、与内容无关的图片请使用background

11、定义颜色可以缩写#8899FF=#89F

12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

13、<script>没有language这个属性，应该写成这样: <script type=”text/javascript”>

14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试） table{border-collapse:collapse;} td{border:#000 solid 1px;}

16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。

17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效 <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

19、在IE中可能由于注释带来的文字重复问题时可以把注释改为： <!?[if !IE]>Put your commentary in here…<![endif]?>

20、如何用CSS调用外部字体 语法： @font-face{font-family:name;src:url(url);sRules} 取值： name：字体名称。任何可能的 font-family 属性的值 url(url)：使用绝对或相对 url 地址指定OpenType字体文件 sRules：样式表定义

21、如何让一个表单中的文本框中的文字垂直居中？ 如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。

22、定义A标签要注意的小问题： 当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。 只定义了一个a:link时，一定要记得把其它三种状态定义出来！

23、并不是所有样式都要简写： 当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

25、几个常用到的CSS样式：
-1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

-2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

-3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

-4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

-5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

-6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。 针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”

-7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜： .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }

好不容易建立的div+css网页完全符合W3C标准。在ie7下显示非常完美，用firefox一测试，惨不忍睹。经过一番研究发现兼容很简单。

1、增加 div {overflow: hidden;},目的就是让div自动适应内容高度
2、横排的div外套div

另外设定
ul {
margin: 0px;
padding: 0px;
}
是消除li前面的空格

div+css兼容性问题

CSS 兼容要点：DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可

居中
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个

height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照

menubar, 给 a 和 menubar 设置高度是为了

避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为

300px- 10px(右填充)-10px(左填充)最终

div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px (左填充)=320px来计算的。这时我们可以做如下修改：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width :340px;margin:0 10px 0 10px}

关于这个是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）


3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{margin:0;padding:0;}

就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<script type="text/javascript">

div+css兼容问题解决方案（IE5/5.5/6/7/FF）

之前找了几个不同版本的可独立运行的IE浏览器，正好拿来试试页面的兼容性问题。不试不知道，在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团，一直听说IE5是WEB标准制作的一个“钉子户”，现在不得不相信了。

既然有问题，那就找找解决的方法咯，在网上一搜，相关的文章还是不少的，觉得最直接的方法还是“IE

条件注释”，很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式，不利于文件的优化。


找了一些相关的CSS HACK后，觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的，经过测试，终于找到了一个不错的方法，下面我们来看看怎么实现：

大家都知道用!important声明可以提升指定样式规则的应用优先权，如下面的例子：

E1{

background-color: red !important;
background-color: blue;
}

但这样写在IE中会有个问题，看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》，你会知道在IE6和FF中用! important声明可以提高优先级别，但在IE6中的!important声明并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。根据这一点，我们就可以把FF和IE的样式分离开。

OK ，解决了FF和IE的问题，现在来解决IE自己的问题。

看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发，使用“＞”IE是否真的可以认得？我们来看个例子：

E1{

background-color: red;

＞background-color: blue;
}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“＞”，则应该得到的蓝色的背景，因此可以知道“＞”只有IE可以识别，这点是很重要的哦！在后面大家就会知道了。（注：我测试过其它的一些符号，如“~”、“`”、“＜”等，都只有IE可以识别，在此为了感谢嘟嘟，推荐使用“＞”）

我们再来看个例子：

E1{

＞background-color: black;
＞background-color : green;
}


这个例子在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了，来看看例子：

E1{
＞background-color: red;
}
E1{
＞background-color: black;
}


这里我们又用到一个HACK，就是“E1{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；
在IE5以上版本中得到的是黑色背景。

终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：


E1{
width: 500px;
height: 50px;
background-color: red !important;
background-color: blue;
text-align:center;
}

E1{

＞background-color: black;
＞background-color : green;
}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“＞”，因为“E1{}”这个HACK在FF中可以识别。也许你会想，上面的例子不是可以写成：

E1{

width: 500px;
height: 50px;
background-color: red;
＞background-color: blue;
text-align:center;
}


E1{
＞background-color: black;
＞background-color : green;
}


这样不就又可以省下几个字节？是没错，可是HACK不是标准，如果滥用HACK，那只会离标准越来越远！

div+css实现Firefox和IE6兼容的垂直居中
Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中，还需要借助于!important标记。Firefox支持!important标记，而IE6忽略!important标记，因此可以使用! important标记区别Firefox和IE6。

[示例代码]
<html>
<body>
<div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px


solid red;">
<p>垂直居中，Firefox only</p>
<p>垂直居中，Firefox only</p>
<p>垂直居中，Firefox only</p>
</div>
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直居中，IE6 only</p>
<p>垂直居中，IE6 only</p>
<p>垂直居中，IE6 only</p>
</div>
</div>
</div>
<div style="border: 1px solid red; height: 200px; position: relative; display:


table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直居中，Firefox IE6 only</p>
<p>垂直居中，Firefox IE6 only</p>
<p>垂直居中，Firefox IE6 only</p>
</div>
</div>
</div>
</body>
</html>


div+css的浏览器兼容问题
水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而

IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记