div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..

282030166 2022-12-26 13:15:07 博主文章分类：CSS ©著作权

©著作权归作者所有：来自51CTO博客作者282030166的原创作品，请联系作者获取转载授权，否则将追究法律责任

<style type="text/css"> 
 <!-- 
 li { 
      width:200px; 
      white-space:nowrap; 
      text-overflow:ellipsis; 
      -o-text-overflow:ellipsis; 
      overflow: hidden; 
      } 
 --> 
 </style>

<!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>

<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>

<style type="text/css"> 
 <!-- 
 div { 
      width:300px; 
      word-wrap:break-word; 
      border:1px solid red; 
 } 
 --> 
 </style> 

 <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 

 <scrīpt type="text/javascrīpt"> 
 /* <![CDATA[ */ 
 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>

<?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>

<script type="text/javascript">
   /*
   **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)powered by 25175.net   **
   **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
   **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
   **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 
   */ 
   var speed1=0 //图片左移的速度
   var MyMar1 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
   var MyMar2 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
   var lefthit=0  //记录左移按钮点击次数
   var righthit=0 记录右移按钮点击次数  
   //调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
   function clearleft(){
    clearInterval(MyMar1)
    clearInterval(MyMar2)
   } 
   //图片左移的方法
   function toleft(){
      //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
    if(lefthit==0){
     speed1=30;//图片左移速度时间毫秒
     //让的内容demo2与demo1内容一样
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     //上行图片移动的方法
     function Marquee1(){
        //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
      if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
       //demo跳回初始位置
       document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
      }
      else{
       //demo开始重新移动
       document.getElementById("demo").scrollLeft++
      }
     }
     //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
     MyMar1=setInterval(Marquee1,speed1)
     //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
     document.getElementById("demo").onmouseover=function() 
     {clearInterval(MyMar1);clearInterval(MyMar2)}
     //当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
     document.getElementById("demo").onmouseout=function() 
     {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
       //下面的方法与上面的方法一样，用于第二行的图片向左移动
       document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee2(){
      if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
       document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
      else{
       document.getElementById("demo_a").scrollLeft++
      }
     }
     MyMar2=setInterval(Marquee2,speed1)
     document.getElementById("demo_a").onmouseover=function() 
     {clearInterval(MyMar2);clearInterval(MyMar1)}
     document.getElementById("demo_a").onmouseout=function() 
     {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
     lefthit=1  //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
     righthit=0 //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
    }
   }
   
   
   var MyMar3 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
   var MyMar4 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
   var speed2=0 //图片右移的速度
   //调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
   function clearright(){
    clearInterval(MyMar3)
    clearInterval(MyMar4)
   }
   
   
   //图片右移方法(与图片左移方法思路一样)
   function toright(){
       //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
    if(righthit==0){
     speed2=30;
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     function Marquee_a(){
      if(document.getElementById("demo").scrollLeft<=0){
       document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
      }
      else{
       document.getElementById("demo").scrollLeft--
      }
     }
     MyMar3=setInterval(Marquee_a,speed2)
     document.getElementById("demo").onmouseover=function() 
     {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
     document.getElementById("demo").onmouseout=function() 
     {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
   
     
     document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee_b(){
      if(document.getElementById("demo_a").scrollLeft<=0){
       document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
      }
      else{
       document.getElementById("demo_a").scrollLeft--
      }
     }
     MyMar4=setInterval(Marquee_b,speed2)
     document.getElementById("demo_a").onmouseover=function() 
     {clearInterval(MyMar4);clearInterval(MyMar3)}
     document.getElementById("demo_a").onmouseout=function() 
     {MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
     righthit=1 //设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
     lefthit=0 //把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
    }
   }
 </script>

提问和评论都可以，用心的回复会被更多人看到评论

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..

div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..

CSS技巧

1.div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

<#div id=”imfloat”>

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

4 IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生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>

7.IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)

例如某一个wrapper如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

<div id=”page”>

<div id=”left”></div>

<div id=”center”></div>

<div id=”right”></div>

</div>

<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>

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!)

关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* 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 */

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<div id="box">

<p>p对象中的内容</p>

</div>

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12 .IE6下为什么图片下有空隙产生

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

13.如何对齐文本与文本输入框

加上 vertical-align:middle;

<style type="text/css">

margin:5px;/IE下理解为10px/

display:inline;/IE下再理解为5px/}

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

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