2017-05-16 13 views
1

インスペクタを表示するまでテーブルが正しく表示されず、すべてが正しく表示されるということはどういう意味ですか?Firefoxテーブルの境界線の矛盾 - インスペクタが開いているときに表示されない

私は表示するテーブルがあり、セルの周りに境界線が必要です。いくつかのセルは、境界を一貫して表示しません。 ページをリフレッシュすると、セルがばかばかしくアウトライン化します。 Developer>Inspectorオプションを選択すると、すべてのセルが即座に正しく表示されます。また、ブラウザのサイズを変更すると、テーブルが正しく表示されます。 Chromeに同じページを表示すると、セルは常にアウトライン化されます。実際の手がかりは、インスペクタを開くとテーブルが正しく表示されるということです。インスペクタは何をしていますか?私はMozillaのバージョン53.0.2を使用しています。ここで

は、表スタイルである:

<style> 
.statusTable { 
    width:100%; 
} 
.specialRow td { 
    padding:3px; 
    padding-top:20px; 
    background-color:#EEE; 
} 
.outlinedRow td { 
    padding:3px; 
    border-width:1px; 
    border-style:solid; 
    border-color:grey; 
} 
.statusTable tr th{ 
    padding:3px; 
} 
</style> 

行の2つのスタイル、 'specialRow' または 'outlinedRow' のいずれかがあります。ページがをリフレッシュされたとき、私はこの取得:

enter image description here

をしかし、私はインスペクタを起動した場合、表示が修正されています。私がどうあるべきかの

enter image description here

任意のアイデア?

編集1

これは間違いなく、ズームとは関係ありません。ズームのどのレベルでも同じ問題が発生します。リフレッシュは100%スケールの不安定なグリッドを塗りつぶします。また、ズームインしてズームアウトすると、グリッドは不安定なままです。場合によっては、グリッドの他の部分をズームすると消えます。

私はborder-collapse: separateborder-collapse: initialと同様にborder-collapse: collapseでテストしており、いずれの場合も問題が発生します。

答えて

0

"tbody"タグが一致しないという問題がありました。私はオープニング<tbody>とブロックの最後に別のものを持っていた - 私はスラッシュを持っていなかった。レイアウトに多くの問題を引き起こすのは驚くべきことではありません。しかし、奇妙なことは、明らかにインスペクタを呼び出すと、その時点でHTMLの有効性がチェックされ、何の指示もなく問題が解決されるということです。 Chromeは初期ページの読み込み時に修正されているようです。

tbody終了タグが修正され、すべて正常に動作します。

注:私はブートストラップに依存していることに気付きました。ブートストラップCSSファイルを削除した場合、レイアウト全体が壊れていましたが、テーブルの境界線は正しいです。 tbody以外のタグを試してみましたが、この問題はありませんでした。したがって、不均衡なtbodyとboostrapと境界線の間に不確定な接続がありますが、これ以上の詳細を見つける時間はありません。

関連する問題