梦网页设计制作 - 浏览器兼容问题http://www.yuxiaomiao.com.cn/css+div-石家庄网站建设-SEO网站优化排名服务 - RainbowSoft Studio Z-Blog 1.8 Walle Build 100427zh-CNCopyright 2006-2009 梦网页设计. 站点地图   Copyright 2006-2009 冀ICP备08101**号 Some Rights Reserved.欢迎联系梦设计，QQ:819204705.您可以在河北石家庄梦设计工作室css+div资料站了解到：css+div|css+div布局|css+div排版|SEO|SEO服务|SEO优化|SEO技术|SEO工具|SEO教程|SEO培训|什么是SEO|网站优化|搜索引擎优化等网站资讯Thu, 09 Sep 2010 10:21:31 +0800FireFox与IE的区别a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/Compatibilityproblem/42/Mon, 30 Mar 2009 16:14:27 +0800http://www.yuxiaomiao.com.cn/Compatibilityproblem/42/FireFox与IE的区别:
       1、Div居中问题：
        FireFox中将DIV的margin属性设置为：margin: 0px auto;或margin-left:auto;margin-right:auto;，此时在FireFox中DIV已经显示居中。
        IE中则不行需要将父级元素的text-align属性设置为:text-align:center;，在前台才会显示居中。上面所说的方法对IE无效.
        2、超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>      
        3、UL的padding和margin:
        FireFox中默认有padding值
        IE中默认有margin值；首先定义了ul{margin:0px;padding:0px;}可以解决一些不必要的问题。
        4、form标签
        在IE中form的margin会加一些边距，而在FireFox中margin的值为零。所以在样式中如果没有指定margin的值，那么在IE和FIreFox中的显示效果是不一样的。为了避免一些不必要的问题，在一开始我们就可以把form的margin值定死form{margin:0px; padding:0px;}
        5、BOX模型解释不一致问题  
        在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-} 
        6、属性选择器(这个不能算是兼容,是隐藏css的一个bug)    p[id]{}div[id]{}    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 
        7、最狠的手段 - !important;    如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下   .tabd1{    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;     background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; }   值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过。
        8、IE和FireFox的默认值问题 
        9、在FireFox中文本无法将容器的高度撑开
        标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，{ height:auto!important; height:200px; min-height:200px; }这样设置同时实现了固定高度同时又实现了高度撑开，同时又照顾了不认识CSS的IE6。
        10、FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 <style type="text/css"> <!-- div {      width:300px;      word-wrap:break-word;      border:1px solid red; } --> </style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt">  function toBreakWord(el, intLen){      var ōbj=document.getElementById(el);      var strContent=obj.innerHTML;      var strTemp="";      while(strContent.length>intLen){          strTemp+=strContent.substr(0,intLen)+" ";          strContent=strContent.substr(intLen,strContent.length);      }      strTemp+=" "+strContent;      obj.innerHTML=strTemp; } if(document.getElementById   &&   !document.all)   toBreakWord("ff", 37);  </scrīpt> 
        11、容器的宽度在IE和FF中解释不同
        <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div {      cursor:pointer;      width:200px;      height:200px;      border:10px solid red      } --> </style> <div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div> 问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

IE6,IE7,FF   IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章： 现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集. 

第一种，是CSS HACK的方法    height:20px;     *height:25px;     _height:20px;     注意顺序。    这样也属于CSS HACK，不过没有上面这样简洁。    #example { color: #333; }     * html #example { color: #666; }     *+html #example { color: #999; }   

    <!--其他浏览器 -->    <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]-->  

第三种，css filter的办法，以下为经典从国外网站翻译过来的。.    新建一个css样式如下：    #item {         width: 200px;         height: 200px;         background: red;    }     新建一个div,并使用前面定义的css的样式：    <div id="item">some text here</div>     在body表现这里加入lang属性,中文为zh：    <body lang="en">     现在对div元素再定义一个样式：    *:lang(en) #item{         background:green !important;    }     这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：    #item:empty {         background: green !important    }     :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。    对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。


 

]]>浏览器兼容问题http://www.yuxiaomiao.com.cn/Compatibilityproblem/42/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=42http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=42&key=d8dbe751浏览器兼容问题a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/Compatibilityproblem/41/Mon, 30 Mar 2009 16:00:08 +0800http://www.yuxiaomiao.com.cn/Compatibilityproblem/41/        浏览器的兼容性是越来越多的网页设计者要考虑的问题。现有的浏览器对CSS和DIV的兼容性并不是太好，纵使现在的设计者在进行编写时考虑各方面的问题。
        我把自己在编写时碰到的一些问题及从网上找到的问题进行了总结。如果说的什么地方写的不合适或者说你有更好的方法请告知.
        下面就是问题及解决方法：
1、对于DIV的垂直居中问题（vertical-align:middle;），对于一些新后来说对DIV的徒工直居中问题很烦脑，在样式中写了vertical-align:middle;在浏览器中显示的仍然没有居中，像这样的情况学者就会认为是自己样式哪写的不正确，或是少了某个代码。检查了一遍并没有什么问题，此时学者就会摸不着头脑了。现在大多数的CSS+DIV设计者会采用如些方法来解决这问题。
方法：
 将行距增加到和整个DIV一样高（line-height:200px;）然后插入文字，在前台显示正常。唯一的缺点就是所控制的内容不要换行.
2、外边距（margin）加倍问题：
在为某个DIV设置了float属性时，在IE浏览器中margin的值会被子加倍。
方法：
在这个DIV的样式中写入display:inline;如：<div id="imfloat"></div>相应的样式(css)为#imfloat{float:left;margin:5px; display:inline;}
针对DIV浮动IE所产生的双倍距离问题，通常情况下会在样式中写入：display:inline;(使浮动忽略)。说到这我们想到了有关display的所有值.例如:block、inline、table等。它们有何区别，在这我简单的对他们描述下。
3、IE宽度和高度的问题：IE不认得min-这个定义，它把正常的width和height当作有min的情况来使，如此一来就会造成很多的问题，例如：只有宽度和高度，正常的浏览器里这两个值就不会变，IE下面根深蒂固本等于没有设置宽度和高度。如果说要设置背景图片，这个宽度就比较重要。方法：
#box{width:auto; height:auto; min-width:80px; min-height:35px;}
4、页面的最小宽度：
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，如此一来就能保证排版一直正确。但IE不认得这个，实际上它把width当做最小宽度来使，为了让这一命令在IE上也能用，可以往<body>标签中放入<div>然后给其指定一个类。CSS这样设计：#container{ min-width:600px; width:e-xpression(document.body.clientwidth<600? "600px" "auto">);}解释：第一个min-width是正常的；第二个width使用了javascript，这只有IE才认得，同时也会让你的HTML文档不太正规,它实际上通过javascript的判断来实现最小宽度。

5、DIV的浮动IE文本是生3象素的BUG
左边对象浮动，右边采用处补丁在左边距来定位,右边对象内的文本会离左边有3px的间距.
<style type="text/css">
#box{ float:left; width:1000px;}
#left{ float:left: width:50%; margin-right:-3px;}
#right{ width:50%;}
</style>
<div id="box">
 <div id="left"></div>
 <div id="right"></div>
</div>
6、IE捉迷藏问题
当DIV应用复杂的时候每个栏中都存在一些链接时，DIV等这个时候容易发生捉迷藏问题：有些内容显示不出来 但内容确实在页面。我们可以采用line-height属性或使用固定高和宽，使页面的布局尽量简单.

7、float的DIV闭合:清除浮动:自适应高度
（1）对于N个FLOAT DIV的父层进行了属性设置并没有FLOAT属性，而当其子层DIV中的内容加多、高度加长时，父层的高度并不会随着改变。DIV学者都碰到过同样的问题。
如：
<div id="page">
 <div id="left" style="float:left;"></div>
 <div id="center" style="float:left;"></div>
 <div id="right" style="float:left;"></div>
</div>
子DIV都设置了FLOAT属性,而父层没有设置。这样一来子层就脱离了父层从而产生当子层的高度拉长时而父层并没有任何的变化.特别是给父层设置了背景后视觉效果很明显 。针对这一问题我们可以采用以下方法:
在父层中再嵌套一层DIV将其设置为float代码如下:
<div id="page">
 <div id="bg" style="float:left; width:100%;">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
 </div>
</div>
(2)万能float 闭合(非常重要!)    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }    .clearfix { display:inline-block; }        .clearfix {display:block;}            或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
(3)高度不适应
指当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或padding时.
例：
<style type="text/css">
 #box{ background-color:#ccc;}
 #box p{margin-top:10px; margin-bottom:10px; text-align:center;}
</style>
<div id="box">
 <p>内容</p>
</div>
解决方法：在P对象上下各加2个空的DIV对象将样式设置如下：
.d{ height:0px; overflow:hidden;}或者为其加上border属性.
8、在IE6中图片所产生的距离：
方法：1、将img设置为display:block;或者设置vertical-align属性为vertical-align:top(bottom\middle\text-bottom)都可以解决这样的问题.
13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input {      width:200px;      height:30px;      border:1px solid red;      vertical-align:middle; } --> </style>

9、web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id="aa"   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子 三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

10、 LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li {      width:200px;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      } --> </style>

11、为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html {      scrollbar-face-color:#f6f6f6;      scrollbar-highlight-color:#fff;      scrollbar-shadow-color:#eeeeee;      scrollbar-3dlight-color:#eeeeee;      scrollbar-arrow-color:#000;      scrollbar-track-color:#fff;      scrollbar-darkshadow-color:#fff;      } --> </style>

12、为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

13、怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

14、怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css"> <!-- div {      position:absolute;      top:50%;      lef:50%;      margin:-100px 0 0 -100px;      width:200px;      height:200px;      border:1px solid red;      } --> </style>

]]>浏览器兼容问题http://www.yuxiaomiao.com.cn/Compatibilityproblem/41/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=41http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=41&key=5821c893