2012-01-10 12 views
1

基本的に、私がテキストを拡大すると、私のフォーメーションが崩れる。テキストズームは、黄色のボックスズームとは異なる速度でズームするようです。ie8のzoomは、テキストを展開するのとは異なる比率でdivを展開しますか?

これはなぜ起こっているのですか?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
      <meta http-equiv="Expires" content="-1"/> 
       <style> 
       .highlightLine 
       { 
        filter: alpha(opacity=50); 
        opacity: 0.5; 
        background-color: #e8e800; 
        position: absolute; 
        z-index: 1; 
        -moz-user-select: none; 
       } 

       .clickAbleTable 
       { 
        border-width: 0px; 
        border-collapse: collapse; 
        position: relative; 
       } 

       .zeroAll 
       { 
        padding: 0px; 
        margin: 0px; 
        border: 0px; 
       } 
      </style> 

    </head> 
    <body class="zeroAll"> 
     <DIV style="POSITION: absolute; FONT-SIZE: 100%" id=container name="container" class="zeroAll"> 
      <TABLE style="WIDTH: 100%" class="clickAbleTable zeroAll"> 
       <TBODY class="zeroAll"> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        <TR class="zeroAll"> 
         <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR> 
        </TBODY> 
      </TABLE> 

      <DIV style="WIDTH: 10px; DISPLAY: block; HEIGHT: 100%; TOP: 0px; LEFT: 140px" id=colMark_80_4 class=highlightLine> 
      </DIV> 
      <DIV style="WIDTH: 10px; DISPLAY: block; HEIGHT: 100%; TOP: 0px; LEFT: 5.55%" id=colMark_80_5 class=highlightLine> 
      </DIV> 
     </DIV> 
    </body> 
</html> 

注:

は、以下のサンプルコードで黄色の線は、ワードサンプルのいずれかの側に滞在する必要があります。

Grae

+1

ズームアルゴリズムは駄目です。あなたは本当にそれを修正することはできません。 –

+0

テキストはどのようにしてサイズが倍になりませんか? –

+0

@Diodeus私はie8モードがie7モードよりも優れていることに気付いたが、それでもやっかいだ。 –

答えて

0

IEは、テキスト及び位置決め要素とフロート対静的要素のための異なるアルゴリズムを有します。 adaptive zoomアルゴリズムは、テキストと静的な要素のためのような作品:

寸法スケーリングはIE8の適応拡大の中で最も重要な改善点の一つです。絶対単位(たとえば、インチ、cm、mmなど)またはデバイスとフォントに依存する単位(例:px、ex、emなど)を使用して指定された寸法は、ズームレベルごとに調整されます。したがって、200%で100pxは200pxになり、20ptは40ptになります。 コンテンツ依存ディメンション、つまりパーセントと自動は、レイアウト中に計算されるため、スケーリングされません。したがって、200%で、ビューポートの50%の幅は100%にならない。これは、IE7のZoomからの大きな変化です。

位置決め要素のためなどと浮遊:

位置付け要素は、インフロー要素を成長し、収縮します。しかし、新しい位置は、プロパティセットと使用されたオフセットによって決まります。同様に、浮動小数点数はCSSの通常の規則に従ってコンテナに対して配置されます。ズームでコンテナの幅が変わると、フロートの位置が変わります。隣接する浮動小数点のズームは、ウインドウのサイズ変更とまったく同じです。ビューポートの幅が浮動小数点数に対応できるほど大きくなければ、マークアップの最後の行は次の行にドロップされます。

は、スケーリングを修正するためにIE10で次のメタタグを使用しながら、IE8の互換モードで:

<meta http-equiv="X-UA-TextLayoutMetrics" content="natural" /> 

参照

関連する問題