1. 超链接访问过后hover样式就不出现的问题 
    被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A 
    Code:
    <style type="text/css">
        <!-- 
            a:link {}
            a:visited {}
            a:hover {}
            a:active {}
        -->    
    </style>

2. FireFox下如何使连续长字段自动换行 
   众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 
   Code: 
    <style type="text/css">
    <!-- 
        div {
            width:300px;
            word-wrap:break-word;
            border:1px solid red;
        }
    -->
    </style>
    <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    Js代码
    <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);    
    /* ]]> */   
    </script>

3.ff下为什么父容器的高度不能自适应 
  在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。 
  Code:
  clear:both;
4.IE6的双倍边距BUG
  浮动后本来外边距10px,但IE解释为20px,解决办法是加上
  Code:
  display: inline

5. IE6下绝对定位的容器内文本无法正常选择
   此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考: 
   http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

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

7. IE6下两个层中间有间隙 
   这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

8. list-style-image无法准确定位
   list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

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

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

11.如何垂直居中文本 
   将元素高度和行高设为一致。 
   Code:
   <style type="text/css">
    <!-- 
     div{
      height:30px;
      line-height:30px;
      border:1px solid red
     }
    -->
   </style>

12.如何对齐文本与文本输入框
  加上 vertical-align:middle; 
  Code:  
  <style type="text/css">
    <!-- 
     input {
       width:200px;
       height:30px;
       border:1px solid red;
       vertical-align:middle;
     } 
    -->
  </style>

13.FF下面不能水平居中呢 
   FF下面设置容器的左右外补丁为auto就可以了
   Code: 
   <style type="text/css">
     <!-- 
      div{
          margin:0 auto;
      }
     -->
   </style>

14.FF下文本无法撑开容器的高度 
   标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: 
   Code:  
   {
      height:auto!important;
      height:200px;
      min-height:200px;
    }

15.IE6下容器的宽度和FF解释不同呢 
   Code:
    <?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)">web标准常见问题大全</div>

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考: 
    [url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/ 
    ASPNETusStan.mspx?mfr=true[/url]

16.    为什么web标准中IE无法设置滚动条颜色了
    解决办法是将body换成html 
    Code:  
    <!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>

17.    为什么我定义的样式没有作用呢 
    这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa 
    Code:
    <!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">
        <!--
        #aa ul li {
                color:red
            }
        .aa {
                color:blue
            }
        -->
    </style>    
    <div id="aa">    
    <ul>
    <li class="aa">    
        web标准常见问题大全
    </li>
    </ul>
    </div>

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

19.    背景颜色无法显示 
    Code:
    <!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">
    <!-- 
    ul {
            background:red
        }
    li {
            float:left;
            width:180px;
        }
    -->
    </style>
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->  
    <ul class="gainlayout">
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <div style="clear:both"></div>
    </ul>
    IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm 
    解决方法之一: 
    Code:
    <!--[if lte IE 6]>
    <style>    
    .gainlayout { height: 1px; }    
    </style>    
    <![endif]-->     
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->

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

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

22.    图片垂直与容器内 
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
    <!-- 
    * {margin:0;padding:0}
    div {
            width:500px;
            height:500px;
            border:1px solid #ccc;
            overflow:hidden;
            position:relative;
            display:table-cell;
            text-align:center;
            vertical-align:middle
        }
    div p {
            position:static;
            +position:absolute;
            top:50%
        }
    img {
            position:static;
            +position:relative;
            top:-50%;left:-50%;
            width:276px;
            height:110px
        }
    -->
    </style>
    <div><p><img src="logo.gif" /></p></div>

或者使用背景图的办法: 
    Code: 
    background:url("logo.gif") center no-repeat;

23.    如何让div横向排列
    横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等. 
    Code:
    <!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 {    
            float:left;
            width:200px;
            height:200px;
            border:1px solid red
        }
    -->
    </style>
    <div>web标准常见问题大全</div>
    <div>web标准常见问题大全</div>

<div>web标准常见问题大全</div>

24  Firefox 关于DIV高度无法自适应的两种解决
    如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，
    出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开
    解决方案：
    1、在DIV内部的最后追加clear:both样式

<div style="background-color:#FF0000;">
        <div style="float:left; height:200px">Jmedia Design</div>
        <div style="float:right; height:800px">www.jmedia.cn</div>
        <div style="clear:both"></div>
    </div>

2、对DIV使用overflow:auto；

<div style="overflow:auto;">
        <div style="float:left; background-color:#000000;height:200px">1111111111</div>
        <div style="float:right;background-color:#000000; height:300px"">2222222222</div>
    </div>

转载于:https://www.cnblogs.com/jia58960/archive/2012/06/07/2539927.html

FF与IE兼容性总结（转载）相关推荐

  1. CSS的解决IE5/IE5.5/IE6/FF/IE7的兼容性问题(css hack)

    之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题.不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个"钉子 ...

  2. 微信H5页面前端开发，大多数人都会遇到的几个兼容性坑(转载)

    1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...

  3. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...

  4. ie6/ie7/firefox/dispaly:inline-block:兼容性

    <div class="update"> 文字内容 <div class="order"> <span class="u ...

  5. [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！

    原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...

  6. Office Project Server 2007 安装出错：SharePoint兼容性故障

    Office Project Server 2007 安装出错:SharePoint兼容性故障 转载▼情况:Office Project Server 2007 在 Windows Server 20 ...

  7. 另类L2TP Tunnel

    说到L2TP VPN,大家肯定会想到xl2tpd和openswan的组合,这是传统L2TP VPN所需要的组件.安装配置步骤相对比较复杂.通常用作Point to Site模式,即:多个接入点(PC. ...

  8. 转： GridView：当鼠标滑过，行的背景颜色发生变化

    前提条件:GridView已经能正常的显示数据了! 这里我将NorthWind数据库的Category表显示出来,接着我们要是实现以下三个功能: 1.将GridView中满足CategoryID为偶数 ...

  9. 对网页是否为当前展示标签页、是否最小化、以及是否后台运行进行监听

    html5新加了window.visibilitychange事件以及window.visibilityState属性,当浏览器标签页被隐藏或显示时会触发window.vixibilitychange ...

  10. 【HTML】框架集（Framesets）

    1.Frameset的使用 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只 要 <FRAMESET> <FRAME> 即可,而所有框架标记 要放在一个总起的 htm ...

最新文章

  1. R语言ggplot2可视化柱状图（条形图）可视化中保留没有用到的因子水平（占位保留）
  2. 断网python第三方库安装_断网环境下利用pip安装Python离线安装包（转载）
  3. oracle开发项目流程,如何开发ORACLE存储过程
  4. 算法笔记_028:字符串转换成整数（Java）
  5. 关于Angular @Injectable的几种测试情况
  6. html5 video 播放状态,10分钟了解HTML5的Video标签属性、方法和事件
  7. Python 面向对象之双下方法，内置函数
  8. FusionChart 保存图片
  9. Protel 99 SE 应用技术问答
  10. 按键精灵手机助手之字符串处理
  11. iOS 堆栈获取异常分析
  12. MySQL DBA必读：万字归总表设计与SQL编写技巧
  13. 怎么把ppt文字大小设置一致_51页PPT告诉你，大神都在用的这些神级插件，到底有多赞?...
  14. 基于FPGA的数字钟设计实验报告
  15. IP座席接入系统方案
  16. opengl进行绿色屏幕抠图
  17. 爱奇艺视频显示列表CSS实现
  18. github创建账号第一步始终出错
  19. gpt mbr ext3_gpt 3，一开始是单词1 2
  20. java的mape_python中的MAPE（平均绝对百分比误差）测量结果

热门文章

  1. Navicat用法入门
  2. 【JavaScript回顾】闭包
  3. 深入了解Oracle数据字典升级脚本catupgrd.sql调用过程
  4. 数据管理与数据治理的区别
  5. 定做属于自己的Lodop安装程序
  6. 适用于ASP.NET的自定义分页控件
  7. sql2005各种版本
  8. 数学库及其应用math库与random库
  9. BZOJ4530:[BJOI2014]大融合
  10. php入门第二篇---变量