DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6 IE7 FF对CSS样式的兼容.

兼容性处理要点

1、DOCTYPE 影响 CSS 处理

2  、 FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 解决办法：给DIV设定IE、FF两个宽度，

在IE的宽度前加上IE特有标记" * "号。或用 !important 多设一个 height 和 width（但随着IE7对!important的支持所以慎用）。

3、 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

       例如: 
 
        #example { 
         width: 100px !important; /* IE7+FF */ 
         width: 103px; /* IE6 */ 
} 

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:xx px!important;     #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

      CSS HACK的方法
 
      首先需要知道的是： 
 
      所有浏览器 通用 height: 100px; 
      IE6 专用 _height: 100px; 
      IE7 专用 *+height: 100px; 
      IE6、IE7 共用 *height: 100px; 
      IE7、FF 共用 height: 100px !important; 
 
      例如： 
 
      #example { height:100px; } /* FF */ 
 
      * html #example { height:200px; } /* IE6 */ 
 
      *+html #example { height:300px; } /* IE7 */ 
 
      下面的这种方法比较简单 
 
      举几个例子： 
 
     1、IE6 - IE7+FF 
 
      #example { 
            height:100px; /* FF+IE7 */ 
           _height:200px; /* IE6 */ 
} 
       其实这个用上面说的第三种方法也可以 
          #example { 
           height:100px !important; /* FF+IE7 */ 
           height:200px; /* IE6 */ 
} 
 
      2、IE6+IE7 - FF 
 
        #example { 
        height:100px; /* FF */ 
       *height:200px; /* IE6+IE7 */ 
}          
 
3、IE6+FF - IE7 
 
#example { 
height:100px; /* IE6+FF */ 
*+height:200px; /* IE7 */ 
} 
 
4、IE6 IE7 FF 各不相同 
 
     #example { 
       height:100px; /* FF */ 
       _height:200px; /* IE6 */ 
       *+height:300px; /* IE7 */ 
} 
或： 
    #example { 
       height:100px; /* FF */ 
      *height:300px; /* IE7 */ 
       _height:200px; /* IE6 */ 
} 
 
         需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面 
 
     解释一下4的代码： 
 
       读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px 
到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px 
到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px 
这样，三个浏览器都有自己的height属性了.
 
 
     *+html 对IE7的兼容 必须保证HTML顶部有如下声明： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> 
 
 
     使用IE专用的条件注释 
 
   <!--其他浏览器 --> 
 
    <link rel="stylesheet" type="text/css" href="css.css" /> 
 
   <!--[if IE 7]> 
 
   <!-- 适合于IE7 --> 
 
   <link rel="stylesheet" type="text/css" href="ie7.css" /> 
 
    <![endif]--> 
 
    <!--[if lte IE 6]> 
 
    <!-- 适合于IE6及以下 --> 
 
   <link rel="stylesheet" type="text/css" href="ie.css" /> 
 
   <![endif]--> 
 
   IE的if条件Hack 
 
    1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 
    2. <!--[if IE]> 所有的IE可识别 <![endif]--> 
    3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> 
    4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> 
    5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> 
    6. <!--[if IE 6]> 仅IE6可识别 <![endif]--> 
    7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 
    8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 
    9. <!--[if IE 7]> 仅IE7可识别 <![endif]--> 
    10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 
    11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then 大于 
    > = > 大于号 
     lt = Less Then 小于 
    < = < 小于号 
   gte = Great Then or Equal 大于或等于 
   lte = Less Then or Equal 小于或等于 
 
     FLOAT闭合（clearing float） 
 
　　网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法： 
 
   １、给父DIV也设上float
 
   2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙) 
  
比如： 
 
.parent{width:100px;} 
.son1{float:left;width:20px;} 
.son2{float:left;width:80px;} 
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;} 
 
<div class="parent"> 
<div class="son1"></div> 
<div class="son2"></div> 
<div class="clear"></div> 
</div> 
 
    3、万能 float 闭合 
 
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可 
代码: 
<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> 
 
:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。 
 
4、overflow:auto
 
只要在父DIV的CSS中加上overflow:auto就搞定。 
 
举例： 
 
.parent{width:100px;overflow:auto} 
.son1{float:left;width:20px;} 
.son2{float:left;width:80px;} 
 
<div class="parent"> 
<div class="son1"></div> 
<div class="son2"></div> 
</div> 
 
除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。 
 
       5、作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适
 
应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义：
 
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

 

        margin加倍的问题

设置了float浮动属性的div,在设置margin属性，这个在IE6下，就会出现Margin加倍的现象；这个是IE6的一个著名的BUG。解决办法就是给DIV设置属性

display:inline; 例如：

<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:10px;/*IE8 FF下理解为10px*/ display:inline;/*IE6下理解为20px*/}

 

       页面的最小宽度

页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实

际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行

的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

 

          IE6的3像素Bug 

IE6的3像素Bug DIV 设置Float浮动后， IE6下就是产生3象素的bug； 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边

有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是

关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div> 六 IE6下图片下有空隙产生 IE6下为什么图片下有空隙产生解决这个

BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-

bottom 都可以解决.

     浮动IE6产生的双倍距离 

 
#box{ float:left; 
      width:100px; 
       margin:0 0 0 100px; 
} 
这种情况之下IE6会产生200px的距离 
 
解决办法：加上display:inline，使浮动忽略 
 
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行
 
上,…不可控制(内嵌元素); 
 
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 

用JS判断不同的浏览器载入不同的css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//根据不同的浏览器调用不同的CSS!
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
document.write('<link  href="ie.css" type="text/css" rel="stylesheet" />');
}else{
document.write('<link  href="ff.css" type="text/css" rel="stylesheet" />');
}
</script>
</head>
<body >
<div id="box"> 在不同的浏览器下，这行字的色应该不同！</div>
</body>
</html>

CSS兼容的一些问题的更多相关文章

  1. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

  2. 主流浏览器css兼容问题的总结

    最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...

  3. CSS兼容问题实用建议

    CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...

  4. css兼容问题集合

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

  5. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  6. CSS兼容常用技巧

    请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...

  7. ie6 7 8 9 firefox的css兼容问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  9. 浏览器 CSS 兼容写法的测试总结

    做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...

  10. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

随机推荐

  1. 回溯法、数独与N阶可达问题

    回溯法是剪了枝的穷举,这是字面上的说法,不太好理解,不如讲解实例来的酸爽,于是引出了N阶可达问题: 有N个国家,每个国家有若干城市,小明要从中国(任意一个城市)出发,遍历所有国家(假设这个遍历顺序已经 ...

  2. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  3. 伪 alter 弹窗 +弹窗统一

    你应该有遇到这种情况:alert() 在手机上面显示的时候 反正是不好看  有的时候就只看到一个白色的框  看不到提示信息  反正很反人类  这时候我觉得 马上会有产品跟你说 这个要改掉. 然后我就遇 ...

  4. [UWP小白日记-14]正则表达式

    匹配2位浮点数:  ^(([1-9]+[0-9]*\.{1}[0-9]{1,2})|([0]\.{1}[1-9]+[0-9]{1,2})|([0]\.\d{1,2})|([1-9][0-9]{1,2} ...

  5. ToDictionary用法

    ToDictionary其实可以简单化,可以传两个lambada表达式,第一个是Key,第二个就是Value. ToDictionary( key => key.Attribute(" ...

  6. 修改release management client对应的服务器的地址

    参考资料:http://stackoverflow.com/questions/25313053/how-to-change-a-release-management-server-name-in-r ...

  7. 使用SLT 工具从SAP导入数据到SAP HANA的监控

    使用SLT工具从SAP导入数据到SAP HANA主要有两种方式监控, 一是在SAP SLT服务器上使用以下T-Code: IUUC_SYNC_MON MWBMON 二是在SAP HANA Studio ...

  8. [Android]Android SDk Manager中创建模拟器无法选择CPU问题解析

    方法一.正常下载所需sdk包 启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Setti ...

  9. Java 彩色图转灰度图

    1. 方法1 BufferedImage grayImage = new BufferedImage(width, height, colorImage.TYPE_BYTE_GRAY); Graphi ...

  10. Java资源大全中文版

    awesome-java-cn 是 Java 资源大全的中文版,包括开发库.开发工具.网站.博客等,将由伯乐在线持续更新. https://github.com/jobbole/awesome-jav ...