Firefoxの奇妙な表のレンダリング

Windows 8.1でFirefox 26.0を使用します。シンプルな表形式のhtml + CSSレイアウトは、異なるズームレベルで不思議に描画されます。Firefoxの奇妙な表のレンダリング

Firefoxの100％ズームは問題ありません。 IEとChromeはドキュメントを適切にレンダリングします。 htmlコードを通常のテーブル/ tr/tdに変更することは役に立ちません。

Windows版Firefox 8.1のバグですか、レイアウトに問題がありますか？

HTMLコード

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div id="board"> 
     <div class="row"> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
     </div> 
    </div> 
</body> 
</html>

CSSコード

#board { 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    border: 1px solid; 
    display: table-cell; 
    height: 1em; 
    width: 1em; 
}

結果：

100％-2ズームアウト：

100%-2

100％-3ズームアウト：で

100%-3

100％+1ズーム：

100%+1

100％+3ズーム中：

100%+3

Bugzillaのから3210

出典

2014-01-11 Vitaliy Shibaev

：

バグ410959 - [BC]表セル境界幅が様々なズームレベルで誤ってレンダリング

bugだと誰もまだそれを解決していません。あなたは表形式のデータを持っている場合は

また、（tableなくdiv

を使用し、このための解決策はborder-collapse: separate;

#board { 
    display: table; 
    border-collapse: separate; 
}

~~Demo~~を使用することですを使用してズームイン/ズームアウトするバギーデモ）

Demo

出典

2014-01-11 09:35:04

は、迅速かつ総合的な答えをありがとう！ –

Firefoxの奇妙な表のレンダリング

答えて

関連する問題