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. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  2. 创建 OVS vlan100 netwrok - 每天5分钟玩转 OpenStack（137）

    上一节完成了 OVS vlan network 的配置准备工作,今天我们创建 vlan100.打开菜单 Admin -> Networks,点击 "Create Network&quo ...

  3. C语言之带有返回值的函数

    带有返回值的函数 语法: 类型 函数名(参数列表){ 函数体; return 数据; } 例: int getSum(int num1,int num2){ int sum = num1 + num2 ...

  4. .NET 基础 一步步 一幕幕[面向对象之堆、栈、引用类型、值类型]

    堆.栈.引用类型.值类型 内存分为堆和栈(PS:还有一种是静态存储区域 [内存分为这三种]),值类型的数据存储在栈中,引用类型的数据存储在堆中. 堆.栈: 堆和栈的区别: 栈是编译期间就分配好的内存空 ...

  5. Windows/Linux 生成iOS证书及p12文件

    操作步骤 生成csr文件(通过OpenSSL命令) 生成mobileprovision文件(通过Apple开发者后台) 生成cer文件(通过Apple开发者后台) 生成P12文件(通过OpenSSL命 ...

  6. lamda 表达式

    Lamda 表达式 高阶语言中的lamda表达式, 灵感来自于lamda演算.lamda演算包括一条变换规则 (变量替换) 和一条函数定义方式, 通过带入和替换, 对输入产生输出. Connect 新 ...

  7. 【锋利的Jquery】读书笔记四

    jquery中的事件及动画 一.事件 页面加载 $(document).ready(function(){xxxxx}) 简写 $(function(){ //do something }) 元素绑定 ...

  8. 常用的HTTP方法

    方法                 描述 是否包含主体 GET  从服务器获得一份文档 否 HEAD  只从服务器获得响应报文的首部 否 POST  向服务器发送需要处理的数据 是 PUT  将请求 ...

  9. Python机器学习包

    常用Python机器学习包 Numpy:用于科学计算的包 Pandas:提供高性能,易于使用的数据结构和数据分析工具 Scipy:用于数学,科学工程的软件 StatsModels:用于探索数据.估计统 ...

  10. Zookeeper单机版安装(CentOS 7环境下)

    一.环境操作系统和软件版本介绍 1.环境操作系统为CentOS Linux release 7.2.1511 (Core) 可用cat /etc/redhat-release查询 2.软件版本 Zoo ...