Div+Css兼容Ie和Firefox_html/css



最近在写一个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下，这点效果是一样。好，接着往下，下一行也这样布局，就分两栏吧。

< style type ="text/css" >
#div1{}{width:200px;height:80px;float:left;border:1px solid blue;}
#div2{}{width:600px;height:80px;border:1px solid blue;}

< div >
< div id ="div1" >
< div id ="div2" >

< div style ="clear:both;margin-top:20px;" id ="div3" >

这样的布局，在 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适应不同的浏览器

让div+css兼容所有浏览器：1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增

在做div+css过程中应该怎样解决浏览器的兼容问题呢?

浏览器优先级别:FF&lt;IE7&lt;IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;} "为例;demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/ html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */ +html #demo {wi...

急急急急!!! div+css在不同浏览器不兼容问题

2, IE6/IE77对FireFox &lt;from 针对firefox ie6 ie7的css样式&gt;*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.代码:&lt;style&gt;#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ...

css如何设置透明度(兼容ie,firefox)

css设置透明度，首先需要知道的是在浏览器中的不同使用，一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行，就能实现兼容，具体看代码：&lt;html&gt; &lt;head&gt; div1{...

IE6.0、IE7.0_与FireFox_CSS兼容的解决方法?

用zoom:1;可以做到,这样就达到了兼容。例如某一个wrapper如下定义: .colwrapper{overflow:hidden;zoom:1;margin:5px auto;}2、margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如:&lt;#div id=”imfloat”&gt;&lt;/#div&gt; 相应的css...

DIV+CSS怎么适配浏览器?

DIV+CSS适配浏览器,意思就是对于div+css的布局，在各个浏览器中的显示，而且是正确的显示，也就是IE，chrom、firefox等等，要满足也就是说在各个浏览器中不会出现错位等问题，要实现这些就需要通过hack，或者是说一些浏览器的兼容技术来实现，如一个透明度，一般在ie中用的是filter:alpha(opacity=0);...

HTML与FireFox的兼容性要怎么处理?

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。常见兼容问题：1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 ...

关于用div+css做的网页在IE和Firefox浏览器上面显示不一样的问题_百度...

margin-left:20px;+margin-left:20px;_margin-left:20px 把这个复制进你的CSS里就OK了 你

div布局与浏览器兼容问题,ie tester的ie7不好使。

&gt;IE8&lt;/strong&gt;&lt;strong style="color:#CC00FF"&gt;FireFox&lt;/strong&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;参考资料：&lt;a href="http://hi.nipic.com/yaohengliang/show_27509.html" target="_blank" rel="nofollow noopener"&gt;http://hi.nipic.com/yaohengliang/show_27509.html&lt;/a&gt;兼容问题一般是css有...

HTML里需要兼容验证的浏览器有哪些

一般以火狐浏览器为标准浏览器为div css开发环境，然后验证微软IE及Opera浏览器。通常我们开发css网站之需要验证微软浏览器包括IE6、IE7、IE8及火狐浏览器即可。兼容性可以使用css hack区别兼容各版本浏览器。在这里我们推荐一款浏览器软件，它包括了微软的ie6、IE7、IE8版本浏览器——IETester。相信看了...