クロムズームレベル25％でページの一部が破損する

Question

最初に最初に、私は他の同様の記事を読んだ。何も助けなかった。

私には完全なピクセルのWebサイトがあり、パーセンテージなどはありません。ズームアウトすると、FirefoxとEdgeでは正常に動作しますが、クロムでは25％に達したときにアイテムが親に収まりません。最後のdiv（box_container_content）インサイド

<div id="main_core_content"> 
     <div class="box_container"> 
      <div class="box_container_content"> 

、私は3つの列（適切に浮い）に項目のリスト（LI）を持っています。例えば、25％のズームに達すると、フローティングされたアイテムはその場所に留まりますが、アイテムのリストは下部からオーバーフローします。私は幅、高さなどを設定していますが、終わりには何もしませんでした。ちなみに、モーダルウィンドウのポップアップは絶対に配置されています。

簡素コード：

#main { 
 
    max-width: 800px; 
 
    height: 600px; 
 
    background: #9b9672; 
 
    color: white; 
 
    padding: 50px 20px 20px 20px; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    border: 1px solid orange; 
 
    background: white; 
 
    color: black; 
 
}

<div id="main"> 
 
    <div id="wrapper"> 
 
    <div id="dicts1"> 
 
     <ul> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Distilled (liquor)</li> 
 
     <li>Hard soda</li> 
 
     <li>Wine</li> 
 
     <li>Barley</li> 
 
     <li>Hot drinks</li> 
 
     <li>Mixed drinks</li> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Distilled (liquor)</li> 
 
     <li>Hard soda</li> 
 
     <li>Wine</li> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Chromeはまだ絶対的な単位に問題があるようです。主要なブラウザはすべて、ページのコンテンツをズームレベルに合わせて絶対単位を再計算しますが、まだ一部のブラウザでは悪いことが起きているようです。 （私は今、Mac上のすべての主要ブラウザをテストすることしかできませんでした。Operaは同じバグを持っています...ほぼ同じレンダリングエンジンを使用しているので驚くべきではありません）

いつも賢明です可能な限り相対単位を絶対単位よりも使用してください。非常に頻繁に言及される（例えば、hereおよびhere）。
ズームレベルの問題が少ないため、emはアクセシビリティに優れています。

また、同様em修正あなたの例を使用してどのように見ることができます：

#main { 
 
    max-width: 800px; 
 
    height: 600px; 
 
    background: #9b9672; 
 
    color: white; 
 
    padding: 50px 20px 20px 20px; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    border: 1px solid orange; 
 
    background: white; 
 
    color: black; 
 
} 
 

 
ul { 
 
    margin-left: 1em; 
 
    padding-left: 1em; 
 
} 
 

 
/* absolute values which still would break 
 
ul { 
 
    margin-left: 15px; 
 
    padding-left: 15px; 
 
} 
 
*/

<div id="main"> 
 
    <div id="wrapper"> 
 
    <div id="dicts1"> 
 
     <ul> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Distilled (liquor)</li> 
 
     <li>Hard soda</li> 
 
     <li>Wine</li> 
 
     <li>Barley</li> 
 
     <li>Hot drinks</li> 
 
     <li>Mixed drinks</li> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     <li>Distilled (liquor)</li> 
 
     <li>Hard soda</li> 
 
     <li>Wine</li> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     <li>Beer</li> 
 
     <li>Cider</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>