解决ie浏览器不兼容浮动float的办法-常见问题-Css教程-壹聚教程网解决ie浏览器不兼容浮动float的办法
float是一个浮动命令了，但有朋友会发现float在一部份ie浏览器中是不兼容的哦，下面我就float不兼容ie浏览器问题给各位分享一个解决办法。
最近在做一个人才网的div+css设计，昨晚发现了长期以来一直无记录下来的问题!关于兼容IE不兼容float属性，沈军分享一下关于不兼容浮动float的解决办法。
一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有设置过float就要将float clear掉，不然下面的div会叠在已float的div上。我通常把清除浮动写成单独的&div class=&clear&&&/div&放在所有浮动div的最下方。
二、在上述1情况中需要设置子div的宽度，假如不设置的话子div的宽度会被默认为母div的100%，这样float根本就产生不了效果。当然还可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效(要把子div撑大只能考里面的元素)。
三、ie中母div被设置成特定高度之后，假如里面的子div高度(有float的话就以清除float的div的最底为总高度)超过了母div设置的高度,ie会自动把母div撑大，但是ff却不能，ff中母div的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度。
上一页： &&&&&下一页：相关内容&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！CSS 多浏览器兼容性问题及解决方案
作者：佚名
字体：[ ] 来源：互联网 时间：12-18 01:44:24
css的兼容性也是大家关注的热点。大家一定要注意多测试。
兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式 4、div 的垂直居中问题: vertical-align: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!margin:28} 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! 浏览器差异 1、ul和ol列表缩进问题 消除ul、ol等列表的缩进时，样式应写成：list-style:margin:0padding:0 其中margin属性对IE有效，padding属性对FireFox有效。 [注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 2、CSS透明问题 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 [注] 最好两个都写，并将opacity属性放在下面。 3、CSS圆角问题 IE：ie7以下版本不支持圆角。 FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4-moz- border- radius-topright:4-moz-border-radius-bottomleft:4-moz- border- radius- bottomright:4。 [注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。 4、cursor:hand VS cursor:pointer 问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。 解决方法：统一使用pointer。 5、字体大小定义不同 对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。 解决方法：使用指定的字体大小如14px。 并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。 6、CSS双线凹凸边框 IE：border:2。 FF： -moz-border-top-colors: #d4d0c8-moz-border-left-colors: #d4d0c8-moz-border-right-colors:#8080;-moz-border-bottom-colors:#8080; 浏览器bug 1、IE的双边距bug 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案：在这个div里面加上display: 例如： &#div id=&imfloat&& 相应的css为 以下为引用的内容： 代码如下: #IamFloat{ float: margin:5/*IE下理解为10px*/ display:/*IE下再理解为5px*/ } #IamFloat{ float: margin:5/*IE下理解为10px*/ display:/*IE下再理解为5px*/ } 关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。 2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。 请看以下代码： 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="//www.w3.org/1999/xhtml"& &head& &title&&/title& &style type="text/css"& &!-- p{font-size:12} p:first-letter{font-size:300%} --& &/style& &/head& &body& &p&对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。&/p& &/body& &/html& [/code] 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="//www.w3.org/1999/xhtml"& &head& &title&&/title& &style type="text/css"& &!-- p{font-size:12} p:first-letter{font-size:300%} --& &/style& &/head& &body& &p&对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。&/p& &/body& &/html& 这段代码对&p&的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符&-&。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符&-&，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。
大家感兴趣的内容
12345678910
最近更新的内容IE浏览器常见的9个css Bug以及解决办法
当前位置：/
/IE浏览器常见的9个css Bug以及解决办法
我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8设计单独的定义。则因此被公认为Web程序员的毒药，虽然在微软官网上并没有提供相关的解决方案，但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的。本文总结了9个IE浏览器上最常见的Bug，以及它们的解决方案。
在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。普通的用户可能不会在意网站的开发人员是不是想尽了办法让自己的网站在他们浏览时所使用的浏览器下能够兼容并且足够稳定和方便使用。但作为一个优秀的Web程序员是不得不有效解决的一个重要问题。下面为广大的网页开发者提供了一个教程，告诉你在IE上9个最常见的BUG以及如何解决它们。
1. 居中布局
创建一个CSS定义把一个元素经放到中间的位置，可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: ，然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
下面是我们所期望的输出：
但IE却给我们这样的输出：
这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是，这是很容易被修正的。
最简单的方法是在父元素中使用 text-align: center 属性，而在元件中使用 text-align: left 。
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;
2. 楼梯式的效果
几乎所有的Web开发者都会使用list来创建导航条。下面是你可能会用到的代码：
list-style: none;
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
一个符合标准的浏览器会是下面这样：
但IE却是这样的：
下面是两个解决方法
解决方法一
设置li元件的float属性。
ul li { float: left; }
解决方法二
设置 display: inline 属性。
display: inline
3. float元件的两倍空白
请看下面的代码：
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
期望的结果是：
IE的结果是：
和上面那个BUG的解决方案一样，设置 display: inline 属性可以解决问题。
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;
4. 无法设置微型高度
我们发现在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。下面是个例子（注意高度是2px）：
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
期望结果： 2px的元件加1px的边框.
IE的结果：
解决方案一
这个BUG的产生原因很简单，IE不允许元件的高度小于字体的高度，所以，下面的fix是设置上字体大小。
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
解决方案二
但是最佳的解决方法是使用 overflow: hidden 。
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden
5. 跨出边界
这个BUG是很难看的。当父元件中使用了 overflow 的 auto 属性，并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例：
id="element" id="anotherelement"
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
#anotherelement{
background: #555;
width: 150px;
height: 175px;
position: relative;
margin: 30px;
期望的结果：
IE的结果：
设置 position:属性
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
6. Fixing the Broken Box Model
Internet Explorer曲解了“盒子模子”可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情，但这个问题还是会因为IE运行在“怪异模式”下出现。
两个Div元件。一个是有fix的，一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。下图的上方是被修正的，下方则没有。
我相信这个事情即不需要解释也不需要演示，这应该是大多数人都明白的。下面是一个很相当怪异的解决方案
width: 400px;
height: 150px;
padding: 50px;
上面的定义也就是说：
#element {
width: 400px;
height: 150px;
\height: 250px;
\width: 500px
是的，你要原来的长和宽上加上了padding。但这个fix只会作用于IE了的“怪异模式”，所以你不需要担心在IE6的正常模式下会有问题。
7. 设置min-height和min-width
IE忽略了min-height。
解决方法一
这个fix由 提供。其利用了 !important 下面是代码片段：
#element {
min-height:150px;
height:auto !important;
height:150px;
解决方法二
#element {
min-height: 150px;
height: 150px;
html>body #element {
height: auto;
8. Float 布局错误行为 Misbehaving
使用无table的布局最重要的就是使用CSS的float元件。在很多情况下，IE6处理起来好像在摸索阶段，有些时候，你会发现很多奇怪的行为。比如在其中有一些文本的时候。
来看一下下面这个示例：
id="container"
id="element"/
id="anotherelement"
#element, #anotherelement{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
期望结果：
IE的结果：
你可以看到其中的不同了
要解决这个问题没有什么好的方法。只有一个方法，那就是使用 overflow: hidden 。
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
9. 在list项目门的空行
先看下面的例子
href="#"Link 1
href="#"Link 2
href="#"Link 3
padding:0;
list-style:none;
background: #95CFEF;
display: block;
期望结果：
IE的结果：
还好，你可以用下面的方法来解决
解决方法一
定义height来解决
background: #95CFEF;
display: block;
height: 200px;
解决方法二
background: #95CFEF;
float: left;
clear: left;
解决方法三
为 li 加上display: inline。
display: inline;
调界面是一件很难的事，调一个CSS的HTML界面是一件更难的事，在IE下调一个CSS的HTML界面是难上加难的事。
如今正还有很多用户在使用浏览器，而IE6并不利于网站设计的兼容性，而网站开发工程师们一直致力于让他们的网站能够兼容于IE6下的浏览。这也为他们带来很多的不必要的负担，我们希望之前仍然在使用IE6的用户能够把到最新，以便你能够体验更愉快的网上冲浪，同时(希望)能够通过这些用户此举(升级他们已经过时的浏览器)来缓和一直以来网络开发工程师们面临的紧张复杂的局面。
评论者：gong
非错不错的文章.前端工程师必读宝典时间&:& 16:17:52
评论者：oxxloxx
哎~ 可恶的IE6时间&:& 16:33:45
&&&&&&&&&&&&&&&&&&&&