div+css浏览器兼容问题解决方法

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

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解决方法：

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

重复定义的话按照最后一个来执行，所以不可以只写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来计算的。这时我们可以做如下修改

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

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

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

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中，所以在Content中又加入了

text-align: left 。

8、用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9、CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container { position: relative }

这样容器内所有的元素都会相对定位，可以这样用：

如果想定位到距左30点，距上5点，可以这样：

#navigation { position: absolute; left: 30px; top: 5px }

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body { background: url(/blog/blue-image.gif) 0 0 repeat-y }

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

HTML的SPAN和DIV的区别

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。　　还有一个标识符具有类似的功能，

DIV也被用来在HTML文件中建立逻辑部分。但与

SPAN不同，

工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。　

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。　　还有一个标识符具有类似的功能， DIV也被用来在HTML文件中建立逻辑部分。但与 SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

div布局时不能居中、居中失灵的解决

一般情况下，div不能居中，div居中失灵是因为页面没有声明引起的：加上

即可

使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。如

.style{margin-left:auto;margin-right:auto;}

缩写形式为：

.style{margin:0 auto;}

数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子：

以下为引用的内容：

</span><span>居中</span><span>div</span><span>演示效果</span><span>

居中div演示效果

注意，需要加上上面的那句

才能生效，要是不想要这句的话，也可以给body加一个属性：

body{text-align:center;}

另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

解决Flash 在Div中无法居中

以下为引用的内容：

#banner{margin:0 auto;} -----用这个动画是距中了

#head{margin:0 auto;} ------用这个整个页面都距中啦~~

FireFox和IE浏览器对于DIV+CSS设计的区别及对策

1、实际像素

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)

Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

所以排列好及列的表格时ie和ff显示宽度稍有区别

2、水平居中

问题：div里的内容，ie默认为center，而ff默认left

解决：mairgin:0px auto;

3、高度问题

问题：如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的告诉，超过部分超出DIV底线以外，出现和下面的内容重叠的现象

解决：控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden;

4、clear:both;

问题：如果上面用float控制了n列DIV，下面ie会自动检测自动排列，ff则可能很不老实，到处乱动

解决：float结束后的下一个标签加clear:both;以结束float的控制

5、最大/小宽度问题

问题：min-width,max-width只是ff的命令，如何让ie实现同样的效果

解决：ie不认识min-和max-，实际ie认为min-width、max-width和width效果一样，可以用下面方法解决

#cctext{

min-width: 700px;

max-width: 1000px;

width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");

}

6、!important支持

问题：ff支持ie6.0不支持

解决：无。ie会忽略。

7、游标状态

问题：cursor:hand;仅ie支持，显示手指状态

解决：使用cursor:pointer;ie和ff都支持

8、单位问题

问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外）

解决：写全单位如padding:0px;

查看文章

/zz/div+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动2008-01-11 17:33由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。

[出现抖动的代码]

最近在写一个Div+Css布局的网站首页，以前写的页面都统一width:900px;不存在什么布局呀什么float的设置。现在没办法呀！要对页面进行切割，分块。幸好，有点css的基础，不过用起来就比较郁闷了。在ie和firefox下，相同的属性值往往会有不同的显示效果。没办法要兼容浏览器只得一个一个bug去找。但完全兼容浏览器是无法做到的，所以也只能将个大概的效果展示出来，不要偏差太大太明显就行。

首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。float:left;float:right;是常用的浮动属性。为了使div能在一行排列，不得补用到它们。呵呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。哎！话是这么说，但真正用到时却出问题了。在ie下，只要前一个div有float:left;后面的div宽度不超过（总body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。ie和firefox下，这点效果是一样。好，接着往下，下一行也这样布局，就分两栏吧。

这样的布局，在ie下和火狐下的显示效果就不同了在firefox下的margin-top:20px;没效果。。。。

在ie下div3的margin-top有效果，而在firefox下却没效果。为什么？翻来覆去的想，终究没有想明白。没办法了，后来我有改css.偶然，给div2加上了float:left属性，然后margin-top:20px都有效果了。郁闷吧呵呵不过还是没弄明白为什么会这样，问题解决了就ok了！

下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left:10px;}的效果是不同的，这样设置的效果才会相同

ul{padding:0;margin-left:10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...

呵呵愚昧的个人见解!

div+css扩展框问题浮动下降 IE与Firefox兼容性整理2008-08-14 10:57div+css扩展框问题浮动下降 IE与Firefox兼容性整理

图文混排容易导致扩展框问题.

扩展框问题

这样排版容易导致扩展框问题.

尽量定义宽高给定值

* 浮动下降问题[size=+0]

加上｛float：left；｝即可```

IE6的双倍边距BUG

解决办法是加上display:inline

IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

IE6下这两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left

如何对齐文本与文本输入筐

遇到此种问题，设置文本框的 vertical-align:middle 就可以了

为什么FF下文本无法撑开容器的高度

[size=+0]

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

{

height:auto!important;

height:200px;

min-height:200px;

}

怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明或者

怎样使一个层垂直居中于浏览器中

使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.

方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

{

width:300px;

margin-left:auto;

margin-right:auto;

}

针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.

关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

1.写两句代码来控制一个属性，区别Firefox与IE：

backgroundrange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

2.写两句代码来控制一个属性，区别IE7与IE6：

background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.

3.写三句代码来控制一个属性，区别Firefox，IE7，IE6：

backgroundrange;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

div+css在FireFox里居中的问题。2008-07-15 15:31尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

解决代码如下：

CSS:

body {padding: 0; margin: 0;}body,html{height: 100%;}

#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}

#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/

#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */

div.greenBorder {border: 1px solid green; background-color: ivory;}

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

div+css实现Firefox和IE6兼容的垂直居中2008年03月10日星期一 02:06div+css实现Firefox和IE6兼容的垂直居中

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

[示例代码]

垂直居中，Firefox only

垂直居中，IE6 only

垂直居中，Firefox IE6 only

IE VS FireFox

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 可以

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

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