★゜・。。・゜゜・。。・゜☆ 2011年04月15日 ☆゜・。。・゜゜・。。・゜★
IE6バグ集(01) 罫線消失の巻
この記事は 1 年 1 ヶ月 8 日 前に投稿されたものです。間違いに気づいたらその都度修正していますが、今読んだらおかしな点もあるかもしれません。ご了承ください。IE6が淘汰されてしまえば、この投稿は完全に意味をなさなくなるのですが、
IE6で、
- jquery-1.3以上を使用……（下のソース1行目）
- border-collapse:collapse;……（下のソース8行目）
- table-layout:fixed;……（下のソース9行目）
- tableの中にtableを入れている……（下のソース16～34行目）
の４つの条件がそろったとき、テーブルの各行の１つ目の罫線が消える
というバグを発見しましたので、書き留めておきます。
ソース↓
<script src="http://code.jquery.com/jquery-1.4.min.js"></script>
<style type="text/css">
table {
width:100%;
}
table.sample {
border-collapse:collapse;
table-layout:fixed;
}
table.sample td {
border:#000 solid 1px;
}
</style>
<table><tr><td>
<table class="sample">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</td></tr></table>
結果↓（ブラウザ依存。IE6以外では正しく見える）
|
IE6での見え方↓（画像）
tableの中にtableを入れるような書き方は、まずやりたくないし、かなり限定された条件なのでめったに起こらないことだと思いますが、既存のソースを修正するにあたって遭遇しました。
対応としては、今回「table-layout:fixed;」を削除しても問題なかったので、それで対処しましたが、tableの入れ子を避ける書き方が良いと思います。
あるいは、「border-collapse」を「separate」にして、例えばtd,thの罫線をtopとleftだけに引き、tableのrightとbottomで補う、というやり方でも良いとは思いますが、それもなんだかなぁ、という気がします。
関連記事かも？
- [html] formの部品とheight値について
- テーブルと枠と、時々、コラム
- クロスブラウザ（主要なもの）対応の不透明度指定CSS
- スタイルが一向に変わらず悩んでいたときに気づいたこと
- IEでもplaceholderが使えるようにするのにjQueryが便利だった。
関連記事は無いと思います。
コメントはまだありません。