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. 如何在网站中加入markdown

    在vue组件中加入markdown,模板使用的是webpack 我是这样做的: 因为是npm引入的,所以markdown是遵循CommonJS规范的,需要在webpack.base.conf.js里引 ...

  2. Scrapy框架安装配置小结

    Windows 平台: 系统是 Win7 Python  2.7.7版本 官网文档:http://doc.scrapy.org/en/latest/intro/install.html 1.安装Pyt ...

  3. Putty的注册表设置

    Putty是一款非常好用的远程管理Linux系统的工具,其主要具有以下几个优点:  完全免费;  在Windows 9x/NT/2000下运行的都非常好;  全面支持SSH1和SSH2:  绿色软件, ...

  4. centos6 安装python2.7+和神器pip

    centos自带python版本是2.6.6,需要采用编译安装的方法安装py27 1.提前yum安装python以及pip神器依赖包(有没有必要都装上就是了,早晚有用): yum install -y ...

  5. 微信小程序-video详解

    在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!! 视频上传部分代码: 视频播放 随机颜色的产生: 颜色页面的选择:

  6. [趣味]WhirlPolygon——彩色旋转正多边形

    此程序用于在AutoCAD中以直线绘制彩色旋转正多边形供欣赏~ 此程序附属MagicTable(可到依云官网下载:http://www.yiyunsoftware.com/),安装之即可使用该程序. ...

  7. InnoDB与MyISAM引擎区别

    mysql中InnoDB与MyISAM两种数据库引擎的区别: 一.InnoDB引擎: 1.支持事务性, 2.支持外部键, 3.行级锁, 4.不保存表的具体行数,执行select count(*) fr ...

  8. chap1 C++泛型技术基础--模板 #STL

    0 缘起 有一点编程经验和积累,想系统的学习下STL,以前都是随意做的笔记,现在想着成主题的输出一下. 书的原型是ISBN:9787302421757 <C++泛型STL原理和应用>,是从 ...

  9. aforge通过角点匹配图片相似度

    我不知道什么原因,人品不好还是啥的 ExhaustiveTemplateMatching这个类无法高精确度的匹配图片 ........... 换一种方式,就好得多 /// <summary> ...

  10. css3 box-reflect 倒影效果

    语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left . right. above: 指定倒影在对象的上边 below: ...