div+css中常见的浏览器兼容性处理

合集下载

WEB前端开发必备之浏览器兼容性处理方法大全

WEB前端开发必备之浏览器兼容性处理方法大全在Web前端开发中，浏览器兼容性是一个常见且重要的问题。

不同的浏览器对HTML、CSS和JavaScript的解析和渲染有一些差异，因此我们需要采取一些特定的处理方法来确保我们的代码在不同的浏览器上都能够正确地运行和显示。

1.使用浏览器兼容性前缀：许多CSS属性在不同的浏览器上有不同的前缀，例如"-webkit-"、"-moz-"和"-o-"等。

在使用这些属性时，需要添加适当的前缀以确保在各个浏览器上都能够正确地解析和渲染。

2. 使用CSS Reset：不同的浏览器对元素的默认样式有一些差异，使用CSS Reset可以将这些默认样式重置为统一的值，以便我们在不同的浏览器上呈现相同的效果。

3.引入浏览器兼容性CSS库：有许多流行的CSS库，如Normalize.css和Reset.css，可以自动处理不同浏览器之间的兼容性问题。

通过引入这些库，我们可以简化兼容性处理的工作量。

4. 使用CSS Hack：CSS Hack是一种使用特定的CSS语法来针对特定浏览器写入样式的方法。

例如，可以使用"\*html"来针对IE6编写特定的样式，或者使用"\_property: value"来针对IE7编写特定的样式。

然而，CSS Hack并不推荐使用，因为它会使代码复杂且难以维护。

5. 使用JavaScript兼容性库：有许多流行的JavaScript库，如jQuery和Modernizr，可以自动处理不同浏览器之间的兼容性问题。

这些库提供了一些常用的功能和方法，并通过检测浏览器的能力来提供相应的兼容性支持。

6. 使用Polyfill和Shim：Polyfill和Shim是一种使用JavaScript代码来实现一些浏览器不支持的功能的方法。

通过使用Polyfill和Shim，我们可以在不支持一些功能的浏览器上模拟这些功能，从而实现兼容性支持。

解决CSS浏览器兼容性问题的4种方案

解决CSS浏览器兼容性问题的4种⽅案前端是⼀个苦逼的职业，不仅因为技术更新快，⽽且要会的东西实在太多了，更让⼈头疼的是，还要⾯临各种适配、兼容性问题。

为什么会有浏览器兼容性问题？还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。

多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。

根据百度流量研究院提供的2018年8⽉⾄2019年2⽉的数据可以看出，Chrome占⽐46.28%，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题，⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。

1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。

*{margin: 0;padding: 0;}关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这⾥给⼤家推荐⼀个库，Normalize.css，github star数量接近3.4万，选取展⽰其中⼏个样式设置，如下html {line-height: 1.15; /* Correct the line height in all browsers */-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */}body {margin: 0;}a {background-color: transparent; /* Remove the gray background on active links in IE 10. */}img {border-style: none; /* Remove the border on images inside links in IE 10. */}通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。

遇到的兼容性问题与解决方法

遇到的兼容性问题与解决⽅法浏览器兼容问题⼀：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。

碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题⼆：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤问题症状:常见症状是IE6中后⾯的⼀块被顶到下⼀⾏碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度碰到频率：60%解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。

备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。

出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。

即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。

浏览器兼容问题四：⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug问题症状：IE6⾥的间距⽐超过设置的间距碰到⼏率：20%解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。

div+css中常见的浏览器兼容性处理

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;一、CSS 兼容以下两种方法几乎能解决现今所有兼容.1, !important (不是很推荐，用下面的一种感觉最安全)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:<style>#wrapper {width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.代码:<style>#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */</style>注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明：代码:<!DOCTYPE HTML PUBLIC "-代码:<style>/* Clear Fix */.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:inline-block;}/* Hide from IE Mac \*/.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>***************************************************************** ******************************************************三、其他兼容技巧(相当有用)1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过vetical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div 在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:兼容代码:兼容最推荐的模式。

CSS浏览器兼容性与解决方法

CSS浏览器兼容性与解决⽅法⼀.什么是浏览器兼容性问题？所谓的浏览器兼容性问题，是指不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况；⽽造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。

认识浏览器内核浏览器类型内核 js引擎IE Trident jscriptFirefox Gecko TraceMonkeyChrome WebKit, Blink V8Safari WebKit SquirrelFish ExtremeOpera Presto Carakancss浏览器兼容性问题的解决思路和⽅案1.使⽤css Hack解决兼容性问题浏览器在读取CSS代码的时候可能会遇到⼀些⽆法识别的代码，造成这种现象的原因通常有两种：1. 代码本⾝有问题，如： bg:red ，bg并不是⼀个有效的css属性2. 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本⾝没有问题，但由于使⽤的是CSS3的属性box-sizing ，会造成在⼀些低版本内核的浏览器中⽆法识别。

总之，当浏览器遇到这些⽆法识别的代码时，它会怎么做呢？和java、C#等后端语⾔不同，浏览器不会中⽌程序的执⾏，它会⽴即跳过这些⽆法识别的代码，就当作没看见⼀样，继续执⾏后⾯的代码。

就向下⾯这个例⼦⼀样：.main{color1 : red; /*这句代码⽆法被浏览器识别，浏览器就当这句代码不存在*/color: green;}浏览器⽅⾯，除了拥有这种特殊的错误处理⽅式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有⾃⼰独特的CSS属性，这些属性在CSS标准之外。

造成这种现象的原因是⼀些历史遗留问题。

⽐如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒⼦宽⾼影响范围的，但其他内核的浏览器是⽆法识别该属性的。

CSS浏览器兼容性的各种代码解决方案

CSS浏览器兼容性的各种代码解决方案1. 使用厂商前缀：不同浏览器厂商会实现一些试验性的CSS属性和值，为了兼容不同的浏览器，我们可以使用相应的厂商前缀。

例如，对于使用Flex布局的情况，可以使用-webkit-、-moz-和-ms-等前缀来适应不同的浏览器引擎。

2. 使用CSS Reset：浏览器的默认样式存在差异，使用CSS Reset 可以将所有浏览器的默认样式统一、常见的CSS Reset方案有Eric Meyer's Reset CSS和normalize.css等。

3. 使用CSS Hack：CSS Hack是通过特定的选择器和属性值来针对特定的浏览器进行样式修正的技巧。

例如，为了兼容IE 6、7、8浏览器，可以使用条件注释或特定的选择器来应用不同的样式。

5.使用媒体查询：媒体查询可以根据不同的设备和屏幕大小应用不同的CSS样式。

通过使用媒体查询，可以为不同的浏览器和设备提供优化的样式。

6. 使用polyfill或fallback方案：Polyfill是在旧版浏览器中填充不支持的CSS功能的JS代码。

如果一些浏览器不支持一些CSS属性，可以使用Polyfill来提供类似的效果。

Fallback方案是通过提供替代的CSS样式来兼容不支持一些属性的浏览器。

7. 使用autoprefixer：Autoprefixer是一个自动添加浏览器前缀的工具，可以根据选择的浏览器和CSS规范自动添加相应的前缀，避免手动添加前缀的繁琐工作。

8. 使用CSS3 PIE：CSS3 PIE是一个让IE6-9浏览器支持CSS3的工具，可以通过引入PIE.htc文件来实现圆角、阴影、渐变等CSS3效果在IE中的兼容显示。

9. 使用Flexbox布局：Flexbox布局是一种强大的CSS布局方式，但在不同的浏览器上存在一些兼容性问题。

可以使用-webkit-、-moz-和-ms-等前缀以及一些兼容性的属性值来解决兼容性问题。

CSS样式在浏览器常见的兼容问题及解决办法

，ie7、ff不支持。
16.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你
给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
17.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具
之间加上
< #div class="clear">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在
嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：
.clear{clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性
前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。
9.img下的留白，大家看这段代码有啥问题：
<div>
<img src=”” mce_src=”” />
</div>
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<div>
<img src=”” mce_src=”” /></div>

CSS兼容性处理方案

CSS兼容性处理方案CSS的兼容性问题是前端开发中常遇到的挑战之一。

不同的浏览器对CSS的解析和渲染方式存在差异，导致网页在不同浏览器上显示效果不一致。

本文将介绍一些常见的CSS兼容性处理方案，帮助开发者更好地解决兼容性问题。

一、CSS ResetCSS Reset是一种常见的兼容性处理方案，它通过重置浏览器默认的CSS样式来消除浏览器之间的差异。

不同的浏览器对元素的默认样式有不同的定义，所以在进行布局和样式设计时，我们需要先将这些默认样式重置为一个统一的基准，然后再进行自定义样式的设计。

常见的CSS Reset库包括Normalize.css和Reset.css，开发者可以根据需要选择合适的库来使用。

二、浏览器前缀部分CSS属性在不同浏览器中存在兼容性差异，为了解决这个问题，开发者可以使用浏览器前缀来为不同浏览器提供特定的样式。

浏览器前缀是一种特定于浏览器的CSS属性前缀，用于指定某个CSS属性在特定浏览器中的实现方式。

常见的浏览器前缀包括-webkit-、-moz-、-ms-和-o-，分别对应Webkit内核、Gecko内核、Trident内核和Presto内核。

通过为某个属性添加不同的前缀，可以保证该属性在各个浏览器中正常显示。

三、条件注释条件注释是一种只在特定版本的IE浏览器中生效的注释语法。

通过使用条件注释，可以为特定版本的IE浏览器提供特定的CSS代码，从而解决不同IE版本之间的兼容性问题。

例如，可以使用条件注释来为IE6提供特定的布局样式，从而弥补IE6本身的不足。

需要注意的是，从IE10开始，IE不再支持条件注释，所以使用条件注释时需要谨慎考虑兼容性问题。

四、媒体查询媒体查询是一种CSS3的特性，它可以根据不同的媒体类型和特定的条件来应用不同的CSS样式。

通过使用媒体查询，可以为不同的设备和屏幕尺寸提供不同的样式，从而实现响应式设计。

开发者可以通过媒体查询来解决不同设备和浏览器之间的兼容性问题，使网页在不同设备上都能正常显示。

divcss浏览器兼容性简介

divcss浏览器兼容性简介
欢迎大家在这里学习divcss浏览器兼容性这里是我们给大家整理出来的精彩内容。

我相信，这些问题也肯定是很多朋友在关心的，所以我就给大家谈谈这个!
(1)不同浏览器对高度的识别。

所有浏览器通用：height: 100px;IE6专用：_height: 100px; *height: 100px;IE7专用：*+height: 100px;
(2)不同浏览器默认的内外边距不同。

针对这个问题，我们可以在样式表中设置*{padding:0;margin:0;}，对内外边距清零来使得浏览器达到统一，这
样就不会出现不同浏览器可能出现的内外边距导致的问题。

(3)Firefox下给div设置padding后会导致width和height相应的增加,但是IE不会。

这样的话就可以用!important来解决，因为ie6浏览器不识别!important属性，这样css可以设置width：100px !important;width: 120px;padding：0 10px;
(4)margin加倍的问题。

设置float的div在ie下设置的margin会加倍，这其实是一个ie的bug。

如果出现这个问题我们可以对div设置display：inline;这样的话ie就不会显示加倍问题了。

block与inline两个元素：block元素的特点是占满一行,也就是下一个元素会换行，但高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是不会占满一行会和其他元素在同一行上,不可控制(内嵌元素);。

对常见的css属性进行浏览器兼容性总结（推荐）

对常见的css属性进⾏浏览器兼容性总结（推荐）为什么要对css属性进⾏浏览器兼容性总结呢？⽤的时候，直接去 Can I Use ⾥⾯检索浏览器对该属性的兼容性情况不就好了吗？css3.jpeg其实，在实际的开发过程中，我们对常见的css属性兼容情况了然于胸，才能极⼤的提⾼我们的开发效率，写出可以进⾏优雅降级的代码。

这⾥并不是说⼀定要所有的css属性兼容情况都要背下来，对于使⽤率较低的，我们直接使⽤Can I Use 进⾏检索。

边框：border-radius: 最低兼容⾄ IE9,其它浏览器兼容情况优良。

box-shadow: 最低兼容⾄IE9, 其它浏览器兼容情况优良。

背景：background-size: 最低兼容⾄IE9, 其它浏览器兼容情况优良。

字体：@font-face: IE9及以上版本的IE浏览器，⽀持引⼊任何格式的字体⽂件，⽽在IE9之前的浏览器，只⽀持引⼊EOT格式的字体⽂件。

其它浏览器兼容情况优良。

2D转换：transform: 最低兼容⾄IE9（需要添加-ms-前缀），其它浏览器兼容情况优良。

在transform属性前加⼊浏览器内核前缀是很好的实践。

不建议在svg元素上使⽤transform属性，最新版本的IE并不⽀持这⼀使⽤⽅式。

3D转换：IE10 和 Firefox ⽀持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不⽀持 3D 转换，它只⽀持2D 转换。

过渡：transition:最低兼容⾄IE10，其它浏览器兼容情况优良。

Safari浏览器需要前缀-webkit-，其它⼤部分浏览器对此并未有前缀要求，因此除了特殊情况，可以不添加其它浏览器的前缀。

动画：animation:兼容情况与transition属性⼤致相同。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

前端浏览器兼容性问题解决方法总结

前端浏览器兼容性问题解决方法总结在前端开发中，浏览器兼容性问题是一个不可忽视的挑战。

不同的浏览器对于网页的解析和呈现有着各自的实现方式和规范，导致同一份代码在不同的浏览器上可能会产生不同的显示效果。

本文将总结一些解决浏览器兼容性问题的方法，以帮助前端开发人员更好地应对这一挑战。

1. 使用标准化的HTML和CSS代码编写符合标准的HTML和CSS代码可以增加网页在不同浏览器上的兼容性。

遵循W3C的HTML和CSS规范，使用正确的语义化标签和正确的样式属性，可以使网页更容易被各个浏览器正确解析和呈现。

2. 引入CSS重置和样式库由于不同浏览器对默认样式的实现方式不同，可以通过引入CSS重置文件来消除这些差异。

CSS重置文件可以将所有元素的默认样式归零，从而确保页面在各个浏览器上的显示效果更加一致。

另外，使用一些流行的样式库，例如Bootstrap或Normalize.css，可以大大简化兼容性问题的解决。

这些样式库中已经包含了对不同浏览器的兼容性处理，通过直接引入使用，可以减少我们自己处理浏览器兼容性的工作量。

3. 使用CSS前缀和Hack一些浏览器对于一些CSS属性和特性的支持可能存在差异，为了确保页面在各个浏览器上都能正确显示，可以使用CSS前缀和Hack来解决兼容性问题。

CSS前缀是为了在不同浏览器之间提供不同的CSS属性实现而存在的。

例如，某个属性在Chrome中使用`-webkit-`前缀，在Firefox中使用`-moz-`前缀。

通过在CSS代码中添加这些前缀，可以让不同浏览器对应自己的实现方式，从而避免兼容性问题。

除了CSS前缀，还可以利用一些特定浏览器的Hack来解决兼容性问题。

例如，针对IE浏览器，可以使用`_`和`*`选择器，或者使用条件注释来针对不同版本的IE 浏览器进行特殊处理。

4. 使用JavaScript进行兼容性处理有些浏览器对于JavaScript的支持存在差异，通过使用JavaScript库或框架可以帮助我们解决这些兼容性问题。

CSS兼容性问题总结及解决方法

CSS兼容性问题总结及解决⽅法css兼容问题兼容问题1.⽂字本⾝的⼤⼩不兼容。

同样是font-size:14px的宋体⽂字，在不同浏览器下占的空间是不⼀样的，ie下实际占⾼16px，下留⽩3px，ff下实际占⾼17px，上留⽩1px，下留⽩3px。

解决⽅案：给⽂字设定 line-height 。

确保所有⽂字都有默认的 line-height 值。

2.ff下容器⾼度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑⼤，⽽ie下是会被内容撑⼤，⾼度限定失效。

所以不要轻易给容器定义height。

3. 横向上的内容撑破容器问题。

如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折⾏。

故，内容可能撑破的浮动容器需要定义width。

4.浮动的清除，ff下必须清除浮动clear:both。

5. double-margin bug。

ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决⽅案，给浮动容器定义display:inline。

6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将⾃动⽣成margin-bottom:14px。

padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这⼀种出现条件。

解决⽅案：外层元素设定border 或设定float。

7.吞吃现象.还是ie6，上下两个div，上⾯的div设置背景，却发现下⾯没有设置背景的div 也有了背景，这就是吞吃现象。

对应上⾯的背景吞吃现象，还有滚动下边框缺失的现象。

解决⽅案：使⽤zoom:1。

8.注释也能产⽣bug~~~“多出来的⼀只猪。

”这是前⼈总结这个bug使⽤的⽂案，ie6的这个bug 下，⼤家会在页⾯看到猪字出现两遍，重复的内容量因注释的多少⽽变。

解决⽅案：⽤“<!–[if !IE]> picRotate start <![endif]–>”⽅法写注释。

DIVCSS常见错误是什么

DIVCSS常见错误是什么
在采用div+css标准布局网页时常常会遇到兼容问题。

我们为大家收集整理了关于DIVCSS常见错误，以方便大家参考。

1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。

可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的} 等。

可以利用CleanCSS来检查
CSS的拼写错误。

CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 确定错误发生的位置
假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性
MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。

这是MacIE的闻名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。

所以不管float元素的内容如何，一定要为其指定width属性。

CSS多浏览器兼容性问题和解决方案.docx

CSS 多浏览器兼容性问题及解决方案兼容性处理要点1、DOCTYPE 影响CSS 处理2、FF: 设置padding 后，div 会增加height 和width，但IE 不会，故需要用!important 多设一个height 和width3、FF: 支持!important，IE 则忽略，可用!important 为FF 特别设置样式4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;浏览器差异1、ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;其中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三项才能达到最终效果。

CSS+DIV浏览器兼容问题解决方法及对网页设计的理解

CSS+DIV浏览器兼容问题解决方法及对网页设计的理解以前在岚海网络学习CSS+DIV的时候也是一头雾水，在一个小小的结构问题上可以花了大半天的功夫，现在接触得多了，其实发现当时只是卡在几个非常细节的问题上：第一种情况：火狐下是正常的，IE6下间距错乱，这种情况，通常应该检查边距MARGIN，可以试着到边距MARGIN换成填充PADDING，这样通常都可以解决问题，也就是说，我们尽量多的在需要使用边距MARGIN的用填充PADDING去代替。

第二种情况：FLOAT造成的页面错乱，FLOAT是CSS当中最常用到的一个代码，当一个大框架当中有好几个小框架FLOAT的时候会倒致大框架失去它的高度，这个时候我们就应该在所以小框架的最后面，加上一个clear:both来清除浮动。

关于网站建设的几点经验：1、素材的收集，平时多浏览一些做得好的欧美网站，现在很多人都喜欢去考参一些韩国的酷站，个人觉得欧美网站的用户体验远远好于韩国酷站，也更符合国情。

见到好的素材及时收集起来。

网页设计是经验的积累，同时也是素材的一个积累。

2、颜色的处理，对颜色有了一定的理解之后，用不超过三种的主色调加浅的过渡色彩(比如很淡的灰色)。

这样的网站，不一定美观，但一定不难看。

3、留白的处理，初学者和有经验的设计师最基本的区别就是间距的处理，好的用户体验网站，就是一个对留白处理得非常好的例子。

4、网页的统一性，色彩和框架的统一，大的方面来说，就是整个网站的标题，描述文字、边框颜色，背景，框架的形状。

小的细节方面就是一个图标的颜色，一个需要强调的符号都有效果的统一起来。

5、在脑海里画效果图，这是一种设计思维，当你可以在效果图上把首页，或者是大致的元素都确定之后，就可以尝试基脑海中想象中其它页面的效果图的样子。

这样便可以节省大量的去把你脑海中的东西画出来的时间。

文章来源于：/article-23745-1.html。

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

7.IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接， DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout 使用 line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简单。 8.float 的 div 闭合;清除浮动;自适应高度; ① 例如：<#div id="floatA" ><#div id="floatB" ><#div id=" NOTfloatC" >这里的 NOTfloatC 并不希望继续平移，而是希望往下排。 (其中 floatA、 floatB 的属性已经设置为 float:left;) 这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将 float 标签闭合。在 <#div class="floatB"> <#div class="NOTfloatC">之间加上 < #div class="clear"> 这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可： .clear{ clear:both;} ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。例如某一个 wrapper 如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} ③对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏的 float div 后面做一个统一的背景,譬如:

DIV+CSS样式在IE6.0浏览器中常见问题解决方法论文

DIV+CSS样式在IE6.0浏览器中常见问题的解决方法div+css样式如今已经飞入了各大网站设计行业。

对于新手来说虽然已经把样式标签与样式代码熟记于心，但是编辑出来的网站与预先设计还有一段差距。

尤其是涉及到不同的浏览器时，在编写时必须对各个浏览器的显示效果进行测试。

由于ie6.0在出现时，css 样式还只是初级发展阶段，有很多功能与效果实现与后面的浏览器有所不同。

故在div+css样式编写时要着重解决相关问题。

1、解决ie6.0当中网页居中的问题为了网页可以更加美观适应性强，一般网站在制作网页时，会让整体网页居中对齐。

以前在使用表格布局的时候，要让一个网站居中对齐是非常简单的。

只需要设置表格居中对齐就可以实现效果。

使用div+css样式其实原理是类似的，只是方法不同。

比如：#top{width：900；margin：0 auto；}网站制作完成后，在各种不同浏览器当中使用，会发现ie6.0依然是左对齐，无法实现居中对齐。

在这句代码中是利用auto来现实居中对齐的，意思是左边与右边宽度随意。

在ie7.0及其以后的版本当中，会对左右宽度随意进行平均分配。

也就是说如果你的网页宽度为900像素，浏览器宽度为1100像素，那么浏览器会自动算出两边宽度分别为150。

这样就可以现实居中对齐的效果。

但是在ie6.0当中对auto却无法解析。

对于这个问题，可以借用text-align来解决。

对上述代码修改后如下：#top{width：900；margin：0 auto；text-align：center；}2、使用float浮动容器后ie6.0不适应问题为了方便div+css样式代码可以适用于各种浏览器，一般在代码编写时会使用float浮动容器。

比如：# left {float：left；width：240；}设置完成后，在ie7.0与火狐等浏览器中两个页面展示出来的效果基本上相差不大。

但在ie6.0中使用浮动容器后会在右侧多出2-3像素左右的高度。

CSS浏览器兼容性问题的解决方法

CSS浏览器兼容性问题的解决方法在网页开发中，CSS（层叠样式表）起到了非常重要的作用，它用于控制网页的样式和布局。

然而，由于不同浏览器的实现方式存在差异，导致CSS在不同浏览器中渲染效果不一致，这就是CSS浏览器兼容性问题。

本文将介绍一些解决CSS浏览器兼容性问题的方法。

一、重置CSS样式在进行网页开发时，不同浏览器会有一些默认的样式设置，造成不同浏览器之间呈现的效果差异较大。

为了解决这个问题，我们可以使用CSS重置来统一不同浏览器的默认样式。

CSS重置的目的是将所有浏览器的默认样式设置为一致的，然后再根据需要重新定义样式。

二、使用浏览器厂商前缀有些CSS属性在不同浏览器中的实现方式不同，为了适应不同浏览器的兼容，我们可以使用浏览器厂商前缀。

常见的浏览器厂商前缀有：-webkit- (Chrome、Safari)、-moz- (Firefox)、-o- (Opera)、-ms- (IE)。

通过给CSS属性添加对应的浏览器厂商前缀，可以在不同浏览器中获得一致的效果。

三、使用CSS HackCSS Hack是一种通过针对不同浏览器的特殊处理方式，来解决浏览器兼容性问题的方法。

例如，我们可以针对不同版本的IE浏览器使用不同的CSS Hack来解决特定样式的兼容性问题。

然而，由于CSSHack的使用方式比较复杂，而且可能存在一些潜在的风险和问题，推荐在实际开发过程中谨慎使用。

四、使用CSS预处理器CSS预处理器是一种将类似于编程语言的语法转换为标准CSS语法的工具，它可以帮助我们更方便地书写和维护CSS代码。

常见的CSS预处理器有Sass、Less和Stylus等。

通过使用CSS预处理器，我们可以使用变量、嵌套、混合等功能来提高开发效率，并且可以避免一些兼容性问题。

五、使用CSS框架CSS框架是一套经过预先设计和封装的CSS样式库，可以快速搭建网页的结构和样式。

常见的CSS框架有Bootstrap和Foundation等。

CSS浏览器兼容性的各种代码解决方案

CSS浏览器兼容性的各种代码解决方案/webds/blog/item/0fc34990dbef5a8ba877a4d1.html网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。

一般情况下，我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器，下面是用的较频繁的CSS Hack技巧：用的最广莫过于!important了，它可以针对IE（IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。

所以为了兼顾IE 6.0与火狐之间的差异，我都会使用!important。

1、仅IE7与IE5.0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

2、仅IE7可以识别*+html select {…!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

3、IE6及IE6以下识别* html select {…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。

其它浏览器不识别。

4、html/**/ >body select {…}这句与上一句的作用相同。

5、仅IE6不识别，屏蔽IE6select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

6、仅IE6与IE5不识别，屏蔽IE6与IE5select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。