常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解_html/css

首页

web前端

html教程

常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

什么是浏览器兼容问题？所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

总结一下我编写代码的时候遇到的浏览器兼容问题，跟大家学习。

一、解决无法在IE6下面设置1px高的容器(div)的问题。

　　大家看看这一段代码：

　　当然，这段代码在非IE6下是能够设置1px高度的div的（如左图），但是在IE6中的效果如右图：

　　非IE6下： IE6下：

　　解决方案：在div里面添加一个空格符( )以创建内容；再设置line-height:1px;即可。

二、透明度opacity不兼容的问题，opacity是属于css2.1的内容，在IE6中并不支持（另外position:fixed;也是css2.1的内容，并不支持IE6）。

　　创建一个宽高100px的div，设置透明度为0.5，背景色黑色如下：

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　background: #000;

　　　　}

　　效果图分别如下：左边为非IE6，右边是IE6

　　非IE6：　　IE6：

　　会看到在IE6中并不支持该属性，解决方案：

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　filter:alpha(opacity=50); //解决IE6问题

　　　　background: #000;

　　　　}

三、IE6下的横向双倍margin bug。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

　　首先要触发这样的bug，就要达到以下条件：

　　1.元素必须浮动（float）;

　　2.元素必须具有横向margin，margin-left、margin-right

　　3.元素必须块元素

　　4.浏览器必须是IE6。

　　以上条件缺一不可，所以只要不是IE6，就不存在这个问题。解决思路很简单，破坏其中一个条件即可。

　　例如：

<head>    <meta charset="UTF-8">    <title>测试浏览器兼容问题</title>    <style>        body{            background: #fff;        }        .wrap{            width: 300px;            height: 150px;            margin:50px auto;            border: 2px solid #333;            overflow: hidden;        }        .wrap div{            height: 100px;            width: 100px;            background: #333;            float: left;             margin-left: 20px;        }    </style></head><body>    <div class="wrap">        <div></div>        <div></div>    </div></body>

　　效果图分别如下：左边为非IE6，右边是IE6

　　可以看到IE6下左边是margin-left值是40px，解决方案：设置display:inline;将其转换成行属性。

四、IE6下如果给图片套上a标签会默认有border。

　　img{

　　　　width: 100px;

　　　　height: 100px;

　　　　}

　　效果图分别如下：左边为非IE6，右边是IE6

　　这个问题相对比较容易解决，只要设置图片的border:none;就可以了。需要注意的是不是设置a标签的border值，而是设置图片的。

五、IE6下不支持png格式图片的透明效果。

　　解决方案：使用使用插件：DD_belatedPNG.js 插件（如需要该插件，可以自行百度:)）

　　说明一下使用方法：贴上以下代码即可

<!--[if IE 6]>    <script src="js/DD_belatedPNG_0.0.8a.js"></script>    <script>    DD_belatedPNG.fix('*');    </script>    <![endif]-->

六、提一下拥有布局haslayout。说道浏览器的兼容问题就不得不提haslayout。

　　在IE6、7中，有时候并没有触发拥有布局。haslayout是什么？用我的理解就是如果元素（标签）拥有了布局，那么它就会获得它本身默认的样式，一切布局就会按照这个默认标准布局，也就是这个布局是正常的。然而，如果元素没有了默认的布局，布局是不是会乱呢？（因为我们给的样式是在元素拥有布局[默认样式]之上的）。所以这种情况下，我们就必须触发这个拥有布局，触发haslayout。

　　触发haslayout有很多种方法：

　　1、最常用也最为安全的方法：给没有haslayout的元素设置zoom:1;（其实是不是1不重要，只要除 none 外任意值）。之所以说它最安全，因为其他浏览器根本不认识它。

　　2、设置height：任何值除了auto。

　　3、设置浮动。

　　4、设置width：任何值除了auto。

七、介绍一下盒模型的2种模式。

　　对于盒模型，大家应该也很熟悉，这里只是介绍一下2个模式：标准模式和怪异模式

　　标准模式：通常在非IE低浏览器中。计算方法：占的空间的宽度=内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边距的宽度（margin + padding+ border+ content）

　　怪异模式：怪异模式是指在IE6及更早的IE版本下盒模型的计算方法：所占空间总宽度=内容＋外边距（ content＋margin）

　　他们之间的相同点和不同点其实也很容易看得出来：

　　相同点：都是由margin ,border,padding,content组成

　　不同点：：计算宽/高度方法的不同，标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；怪异模式下：总宽度是由content减去padding、border得来的。

八、浏览器的兼容还有其他的问题，时间有限就没有一一解释，下面提一提：

　　①：在各个浏览器下img有空隙(原因是：回车)

　　②：Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果，

　　③：3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。（解决方法用hack）

　　④：当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱（zoom:1）

　　⑤：当多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

　　⑥：两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。

　　⑦：优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。

　　⑧：火狐不识别background-position-y 或background-position-x;

　　⑨：ie6 不支持 fixed（前面有提到）

　　⑩：解决 ie6 最大、最小宽高 hack方法（这个说明一下）

/* 最小宽度 */.min_width{    min-width:300px;    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);}/* 最大宽度 */.max_width{   max-width:600px;   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);}/* 最小高度 */.min_height{   min-height:200px;   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);}/* 最大高度 */.max_height{   max-height:400px;   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);}

　　 ①①：z-index不起作用的 bug

九、css hack：前端开发人员根据不同的浏览器以及不同的版本而分别编写的特定的CSS样式，通俗理解就是专门为不同浏览器设置自己的样式。

　　各版本IE的hark，代码表示：

　　.bb{

　　　　height:32px;

　　　　background-color:#f1ee18; /*所有识别*/

　　　　.background-color:#00deff\9; /*IE6、7、8识别*/

　　　　+background-color:#f1ee18; /*IE6、7识别*/

　　　　_background-color:#f1ee18; /*IE6识别*/

　　　　}

　　 div >

　　像刚刚png图片不支持插入的代码一样，这种hack用在专门浏览器下，用法如下：下面还有很多类。

　　　　<!--[if IE 6]> 　　　　   <script src="js/DD_belatedPNG_0.0.8a.js"></script>   　　　　 <script>   　　　　 DD_belatedPNG.fix('*');   　　　　 </script>    　　　　<![endif]-->

符号	含义	示例
！	非运算符	除IE外都可识别
lt	Less than小于
gt	greater than大于
lte	less than或equal小于等于
gte	greater than或equal大于等于
\|	或运算符
&	与运算符

/*类内部hack：*/    .header {_width:100px;}            /* IE6专用*/    .header {*+width:100px;}        /* IE7专用*/    .header {*width:100px;}            /* IE6、IE7共用*/    .header {width:100px\0;}        /* IE8、IE9共用*/    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/    .header {width:330px\9\0;}    /* IE9专用*//*选择器Hack：*/    *html .header{}        /*IE6*/     *+html .header{}    /*IE7*/

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract