火狐とIEの互換性の総括

37711 ワード

html css div

from:http://www.okajax.com/a/200909/ff_ie.

互換性は常に頭を悩ます問題です.以下、簡単に火狐とIEの互換性の問題をまとめます.
1.ハイパーリンクで訪問したら、ホバーのスタイルには問題が発生しません. クリックして訪問されたハイパーリンクのスタイルはホームバーとactiveを持っていません.多くの人がこの問題に遭遇したはずです.解決方法はCSS属性を変える順序です.


  
  
  
  

   
   
   
   <style type="text/css">  

   
   
   
       <!--   

   
   
   
           a:link {}  

   
   
   
           a:visited {}  

   
   
   
           a:hover {}  

   
   
   
           a:active {}  

   
   
   
       -->      

   
   
   
   </style>

2.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">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の下でなぜ父の容器の高さが適応できないのですか? サブコンテナに浮動特性を付加すると、コンテナは自動的に開けられなくなります.解決方法はラベルが終わった後に浮動を取り除く要素を加えます.


  
  
  
  
   
   
   
   clear:both;

4.IE 6のダブルサイドBUG フロート後、本来は外から10 px離れていますが、IEは20 pxと解釈しています.解決方法はプラスです.


  
  
  
  
   
   
   
   display: inline

5.IE 6で絶対的に位置決めされたコンテナ内のテキストは正常に選択できません.   この問題はIE 6、7に存在し、問題を解決する方法はIEをqurks modeに入らせることである.qurks modeに関する知識については、参考してください.    http://www.microsoft.com/..
6.IE 6下の写真の下に隙間ができています.    このバグを解決する方法もたくさんあります.これはhtmlのレイアウトを変えたり、display:blockに設定したりできます.   またはvertical-align属性を設定してもvertical-align:top bottom middle text-bottomで解決できます.
7.IE 6の下の2つの層の中間に隙間がある    このIEの3 PX BUGもよく現れます.解決の方法はElightも同様にfloat:leftまたは相対IE 6定義です.left magin-right:-3 pxです.
8.list-style-mageが正確に位置決めできない   list-style-inageの位置付け問題もよく聞かれます.解決方法は普通liの背景シミュレーションを使っています.ここでは相対的な位置付けの方法を採用しても解決できます.
9.LI中の内容が長さを超えたら省略して表示する方法    この方法はIEとOPブラウザを適用します.


  
  
  
  

   
   
   
   <style type="text/css">      

   
   
   
    <! --       

   
   
   
     li {      

   
   
   
       width: 200px;      

   
   
   
       white-space:nowrap;      

   
   
   
       text-overflow:ellipsis;       

   
   
   
       -o-text-overflow:ellipsis;       

   
   
   
       overflow: hidden;      

   
   
   
       }      

   
   
   
     -->       

   
   
   
    </style>

10.web標準でidとクラスを定義していますが、何か違いがありますか? 一.web標準ではIDの重複は許されません.例えばdiv id=「aa」は2回繰り返してはいけません.classはクラスを定義しています.理論的には無限に繰り返してもいいです.これは何回か引用して定義すればいいです. 彼を使う?遣う二.属性の優先度の問題 IDの優先度はクラスより高いです.上の例を見てください. 三.JSなどのクライアントのスクリプトを便利にして、もしページの中であるオブジェクトをスクリプト操作するなら、彼にIDを定義してもいいです.そうでなければ、ページ要素を遍歴して特定の属性を指定して見つけるしかないです.これは相対的に時間の浪費で、IDよりはるかに簡単です.
11.テキストを縦方向に中央揃えするにはどうすればいいですか? 要素の高さと行の高さを一致させます.


  
  
  
  

   
   
   
   <style type="text/css">  

   
   
   
    <!--   

   
   
   
     div{  

   
   
   
       height:30px;   

   
   
   
       line-height:30px;   

   
   
   
       border:1px solid red  

   
   
   
     }  

   
   
   
    -->  

   
   
   
   </style>

12.テキストとテキスト入力ボックスの配置方法 vertical-alignを加えます.


  
  
  
  

   
   
   
   <style type="text/css">  

   
   
   
     <!--   

   
   
   
      input {  

   
   
   
         width:200px;   

   
   
   
         height:30px;   

   
   
   
         border:1px solid red;   

   
   
   
         vertical-align:middle;   

   
   
   
      }   

   
   
   
     -->  

   
   
   
   </style>

13.FF以下は水平に真ん中に置いてはいけません. FFの下には容器の左右外パッチをセットしてautであれば大丈夫です.


   
   
   
   

    
    
    
    <style type="text/css">  

    
    
    
      <!--   

    
    
    
       div{  

    
    
    
            margin:0 auto;   

    
    
    
       }  

    
    
    
      -->  

    
    
    
    </style>

.FFの下のテキストは容器の高さを開けられません. 標準ブラウザで高さ値を固定している容器はIE 6のように開けられません.高さを固定したいですが、開けたいです.どのように設定すればいいですか?方法はheightを除いてmin-heightを設置することです.200 pxです.ここでは、min-heightを知らないIE 6を配慮するために、このように定義することができる.


   
   
   
   

    
    
    
    {  

    
    
    
        height:auto!important;   

    
    
    
        height:200px;   

    
    
    
        min-height:200px;   

    
    
    
     }

15.IE 6の容器の幅は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)">web        </div>

の問題の違いは容器の全体幅が枠線の幅を計算しているかどうかです.ここではIE 6は200 PXと解釈していますが、FFは220 PXと解釈します.容器上部のxmlを取り除くと元の問題が発見されます.上部の申明はIEのqurks modeを触発しました.qurks mode、standars modeについての知識を参考にしてください. http://www.microsoft.com/.. 16. なぜ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>

. なぜ私が定義したスタイルが機能しないですか? ここでは使えません.aはliがこのような状況に遭遇したらどう解決しますか?答えは高くなります.aaの優先権は例えば〓a ul li.aaです.


   
   
   
   

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

. IE 6 1 px程度の高さを定義できない容器 IE 6のこの問題は、デフォルトの行の高さによるものであり、解決の方法も多い.例えば、


   
   
   
   
    
    
    
    overflow:hidden zoom:0.08 line-height:1px

. 背景色が表示されません.


   
   
   
   

    
    
    
    <!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は表示されていません.これはハスキーアウトの問題です.解決方法も参考になります.http://www.satzansatz.de/cssd/onhavinglayout.htm 解決方法の一つ:


   
   
   
   

    
    
    
    <!--[if lte IE 6]> 

    
    
    
     <style>       

    
    
    
    .gainlayout { height: 1px; }      

    
    
    
     </style>       

    
    
    
     <![endif]-->        

    
    
    
     <!--[if lte IE 6]>  

    
    
    
     <style>  

    
    
    
    .gainlayout { height: 1px; }  

    
    
    
     </style>  

    
    
    
     <![endif]-->

. どうやってレイヤーをFLASHに表示することができますか? 解決策はFLASHに透明を設定することです.


   
   
   
   
    
    
    
    <param name="wmode" value="transparent" />

. どのように1階をブラウザの中に垂直に置くか? ここではパーセンテージの絶対位置付けを使って、外部パッチとの負の値の方法で、負の値の大きさはその幅の高さを2で割っています.


   
   
   
   

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

. 画像は垂直とコンテナ内にあります.


   
   
   
   

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

または背景図を使用する方法:


   
   
   
   
    
    
    
    background:url("logo.gif") center no-repeat;

. どのようにdivを横に並べますか? 横に並べたDIVは、float:leftなどのフロート方式を使ってもいいし、オブジェクトをインラインに設定したり、オブジェクトを絶対的に位置決めしたりすることもできます.


   
   
   
   

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

Firefox DIV高さに関して適応できない二つの解決 DIVの高さを設定したら、DIVの中で実際の内容が設定された高さより大きい場合、ieは自動的に引張り、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:atotを使う.


   
   
   
   

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

javascriptのMath JSON