不同浏览器的样式兼容

《不同浏览器的样式兼容》由会员分享，可在线阅读，更多相关《不同浏览器的样式兼容（11页珍藏版）》请在金锄头文库上搜索。

1、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 会增加 height 和 width，但 IE 不会， 故需要用!important 多设一个height 和 width 5、FF: 支持 !important， IE 则忽略，可用 !important 为 FF 非凡设置样式6

2、、div 的垂直居中问题 : vertical-align:middle; 将行距增加到和整个DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行7、cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅 IE 可以8、FF: 链接加边框和背景色， 需设置 display: block， 同时设置float: left 保证不换行。 参照 menubar， 给a 和 menubar 设置高度是为了避免底边显示错位，若不设 height，可以在menubar 中插入一个空格。9、在 mozilla firefox

3、 和 IE 中的 BOX 模型解释不一致导致相差2px 解决方法：divmargin:30px!important;margin:28px; 注重：这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 11、 ul 标签在 Mozilla 中默认是有 padding值的， 而在 IE 中只有 margin有值所以先定义 ulmargin:0;padd

4、ing:0; 就能解决大部分问题div+css样式常见问题解决发法 : 1.margin 加倍的问题。设置为float 的 div 在 ie 下设置的 margin 会加倍。这是一个ie6 都存在的问题。解决方案是在这个 div 里面加上 display:inline; 2.关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float 的 div 时，宽度很轻易出现问题。在 IE 中，外层的宽度会被内层更宽的div 挤破。一定要用 Photoshop或者 Firework 量取像素级的精度。3.关于高度的问题假如是动态地添加内容，高度最好不要定义或者设置最小高度。浏览器可以自动伸

5、缩， 然而假如是静态的内容，高度最好定好，但是有个不好之处是容器内容多了过后容器不会随之撑长撑大。4.!important 的使用 ;假如实在没有办法解决一些细节问题，可以用这个方法 .FF对于 “!important“会自动优先解析，然而 IE 则会忽略， IE7 会识别。下面的是 IE 浏览器的兼容性问题，是我从宏智博客拷过来的（觉得很有用）：IE 8 测试版已经发布了，我试了一下，发现，有好几个网站因为未完全按照XHTML 1.0 Transitional 制作，页面显示上出现变形。如果来得及修改，那就改改，如果来不及改，可以暂时在页面中加入如下HTTP meta-tag: 认浏览器使用

6、 IE7 兼容模式，利用 IE7 渲染模式 ,这样可以保证最大的兼容性。DIV+CSS 是网站标准（或称 “WEB 标准” ） 中常用术语之一，通常为了说明与 HTML网页设计语言中的表格（table） 定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS 的方式实现各种 定位。 CSS 是英语 Cascading Style Sheets （层叠样式表单）的缩写，它是一种用来表现HTML 或 XML 等文件 式样的计算机语言。 尽管 DIV+CSS 具有一定的优势，不过现阶段CSS+DIV 网站建设存在的问题也比较明显，主要表现在： 第一，对于 CSS

7、的高度依赖使得网页设计变得比较复杂。相对于 HTML4.0中的表格布局 （table） ，CSS+DIV 尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初 学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 第二， CSS 文件异常将影响整个网站的正常浏览。CSS 网站制作的设计元素通常放在几个l 外部文件中， 这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不 忍睹。 第三，对于 CSS网站设计的浏览器兼容性问题比较突出。基于 HTML4.0的网页设计在 IE4.0之后的版本中 几乎不存在

8、浏览器兼容性问题，但CSS+DIV设计的网站在IE 浏览器里面正常显示的页面，到火狐浏览器 （FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在） 。CSS+DIV还 有待于各个浏览器厂商的进一步支持。 第四， CSS+DIV 对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV 本身。 CSS+DIV 网页设计 并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML 网站有更简洁的代码设计，何况搜索引擎对 于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网 站在搜索结果中的排序靠前，而很多使用C

9、SS 及 web 标准制作的网页排名依然靠后的原因。因为对于搜索引 擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。 其中 div+css中浏览器的兼容问题是有些设计师最头痛的事情，例如： Mozilla Firefox设置 padding 后, div 会 增加 height 和 width, 但 IE 不会, 故需要用!important 多设一个height 和 width。在排版时要注意就是哪 些是哪个浏览器所专用的哪些在其他浏览器中不会出现效果，这样版面就会在各个浏览器中显示正常了。例 如：所有浏览器通用 height: 100px;IE6 专用 _height

10、: 100px;前者的使用的话在IE6 FF浏览器中测试内容多了 就不会向下撑，内容就会给隐藏掉。后者在IE6里测试，在内容多的情况下它还是会显示出来，在IE其他的 浏览器中测试也会显示内容。但是在FF中就会隐藏。 div+css样式 IE与 Firefox常见兼容问题： 1、DOCTYPE 影响 CSS 处理 2、FF ：div 设置 margin-left， margin-right 为 auto 时已经居中， IE 不行 3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，margin-right) 方可居中

11、 4、 FF: 设置 padding 后，div 会增加 height 和 width，但 IE 不会， 故需要用!important 多设一个height 和 width 5、FF: 支持 !important ， IE 则忽略，可用 !important 为 FF 非凡设置样式 6、div 的垂直居中问题 : vertical-align:middle; 将行距增加到和整个DIV 一样高 line-height:200px; 然后插入 文字，就垂直居中了。缺点是要控制内容不要换行 7、cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅 IE 可以 8、FF

12、: 链接加边框和背景色，需设置display: block， 同时设置 float: left 保证不换行。参照menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位，若不设 height， 可以在 menubar 中插入一个空格。 9 、 在mozilla firefox和IE中 的BOX 模 型 解 释 不 一 致 导 致 相 差2px解 决 方 法 ： divmargin:30px!important;margin:28px; 注重：这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE不能识别，但别的浏览器可 以识别。 所以在

13、IE下其实解释成这样： divmaring:30px;margin:28px 重复定义的话按照最后一个来执行， 所以不可以只写margin:XXpx!important; 11、 ul 标签在 Mozilla 中默认是有 padding值的， 而在 IE中只有 margin 有值所以先定义 ulmargin:0;padding:0; 就能解决大部分问题div+css样式常见问题解决发法 : 1.margin 加倍的问题。设置为float 的 div 在 ie 下设置的 margin 会加倍。这是一个ie6 都存在的问题。解决 方案是在这个 div 里面加上 display:inline; 2.

14、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float 的 div 时，宽度很轻易出 现问题。在 IE中，外层的宽度会被内层更宽的div 挤破。一定要用Photoshop 或者 Firework 量取像素级的精 度。 3.关于高度的问题假如是动态地添加内容，高度最好不要定义或者设置最小高度。浏览器可以自动伸缩， 然而假如是静态的内容，高度最好定好，但是有个不好之处是容器内容多了过后容器不会随之撑长撑大。 4.!important 的使用 ;假如实在没有办法解决一些细节问题，可以用这个方法 .FF对于“!important“ 会自动优先 解析，然而 IE则会忽略， IE7会识

15、别。 CSS 对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事， 从网上收集 了 IE7,6与 Fireofx 的兼容性处理方法并整理了一下。对于web2.0 的过度，请尽量用xhtml 格式写代码，而且 DOCTYPE 影响 CSS 处理，作为 W3C的标准，一定要加DOCTYPE 声明。CSS 技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点 是要控制内容不要换行2. margin加倍的问题设置为 float 的 div 在 ie

16、下设置的 margin 会加倍。这是一个ie6 都存在的 bug。解决方案 是在这个 div 里面加 上 display:inline; 例如： #div id=”imfloat ” 相应的 css为 #imfloat float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解为 5px*/ 3.浮动 ie 产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; / 这种情况之下 IE会产生 200px的距离 display:inline; / 使浮动 忽略 这里细说一下 block 与 inline 两个元素： block 元素的特点是 ,总是在新行上开始 ,高度,宽度,行高,边距都可以控 制(块元素 );Inline 元素的特点是 ,和其他元素在同一行上 ,不可控制 (内嵌元素 ); #box display:block; /可以为内嵌元素模拟为块元素display:inline; /