IE6でtableのborderの縦線が表示されないです。。

  • 解決済 akito2362

    (@akito2362)


    15年、 10ヶ月前

    wordpressの3.0とtwentytenの1.1を使ってHPを作っているのですが、
    文章の見出し部分にTableを応用して縦線を引きたいのですが、
    FirefoxやIE8だと思った通りのレイアウトになるのですが、
    IE6で見たり、互換表示を使ったりすると、縦線が表示されていないみたいです。

    そもそもテーブルを使って、こういうレイアウトを作ろうとしているのが間違いなのでしょうか？
    普通にやっても縦線のTOPと文章のTOPが合わないので白い縦線を使って強引に合わせています。

    どうやればIE6などでも表示させられるでしょうか？
    よろしくお願いします。

    <table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td width="30" height="5" style="border-left:5px solid white;"></td>
<td rowspan="3">
てすとてすとてすと
てすとてすとてすと
てすとてすとてすと
てすとてすとてすと
てすとてすとてすと
てすとてすとてすと
てすとてすとてすと
</td>
</tr><tr><td height="150" style="border-left:5px solid black;"></td>
</tr>
<tr>
<td width="30" height="5" style="border-left:5px solid white;"></td></td>
</tr>
</table>
6件の返信を表示中 - 1 - 6件目 (全6件中)
  • KKT

    (@kvex)

    15年、 10ヶ月前

    どういう線にしたいのかが見えません。
    どっちにしても、tableでこういうの作るのは関心しないですね。

    <div style="border-left: 3px #000 solid">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</div>

    みたいなことを言ってるんですか？

    shokun0803

    (@shokun0803)

    15年、 10ヶ月前

    今でもIE6に対応しようとする努力はいいのですけど･･･
    本気で対応しようとするならheaderから見直さなくてはだめです。IE6はxmlタグを吐き出すと互換モードになってしまいます。ましてやtwentytenはhtml5で書かれているのでは？IE7、8ですらhtml5には非対応ですので･･･

    WordPressに依存したことではないので、ググるなどして調べていただくしかないですねぇ･･･ここはきっちりさっぱりIE6は忘れてみてはいかがでしょ;)

    KKT

    (@kvex)

    15年、 10ヶ月前

    うちの業務上のＩＥの割り切りかたはＩＥ６はだいたい見れればよしとする。
    って感じですね。

    nobita

    (@nobita)

    15年、 10ヶ月前

    こんにちは

    IE6で見たり、互換表示を使ったりすると、縦線が表示されていないみたいです。

    <td></td>を

<td>＆ｎｂｓｐ；</td>

    に変更すればボーダーが表示できると思います。(半角ですよ～）

    <td width="30" height="5" style="border-left:5px solid white;"></td></td>
</tr>
</table>

</td>一個多いですよね:-)

    そもそもテーブルを使って、こういうレイアウトを作ろうとしているのが間違いなのでしょうか？

    本当の目的がわからないので何もいえませんが、htmlタグをレイアウトのために利用するのは、最小限にした方がいいと思います

    lukeitoh

    (@lukeitoh)

    15年、 10ヶ月前

    tableでも出来ない事はないですが、W3Cを考えると　あまり推奨は出来ません。
    また　IE6でもきっちり見えるようにする場合は　各タグのマージンやパディングでの解釈が違うので、IE6用のCSSが必要になりますね。

    私の場合はhack.cssをIE6専用として作っています。
    記述ですけど
    各タグのセレクターの前に* html を記述してIE6でのパディング（マージン）の解釈の違いを計算したものを入れています。

    tableにするのでしたらnobitaさんの仰る通りですね。

    divタグの他にもリストタグもありますので、そちらを私はお勧めします。
    例えばtopicsのようなものでしたら

    <dl id="news">
<dt>2010/11/30</dt>
<dd>テストテストテスト</dd>
</dl>

    このようにして　あとはCSSで幅とか線を制御するとか･･･

    トピック投稿者 akito2362

    (@akito2362)

    15年、 10ヶ月前

    ＞kvexさん
    ありがとうございます。
    そうです。そんな感じで縦線を入れて、縦線の上と文字の上の位置を合わせて、
    少し縦線と文字の間を離してやりたいのですが、テーブルで作るとIE6では反映されませんでした。

    ＞shokunさん
    ありがとうございます。
    ブラウザのバージョンによって、表示に差がありすぎて修正するのが難しいです・・・。
    headerは難しそうなのでいじった事がないのですが、一度勉強してみます。

    ＞nobitaさん
    おお！＆ｎｂｓｐを入れるとIE6でも表示されました。
    ありがとうございます。半角が無いとIE6ではテーブルのボーダーがバグる？
    みたいですね。覚えておこうと思います。

    >lukeitohさん
    ありがとうございます。
    今はハッシュハックなどW3C的に正しくないらしいやり方で
    無理やりに修正しているので、条件付きコメントでの修正を試してみたいのですが、
    これは全てのページの先頭に入れるものなのですか？
    それともpage.phpかheader.phpなどに一度入れればokなのでしょうか？
    お手数ですが、やり方を教えて貰えると嬉しいです。よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)

トピック「IE6でtableのborderの縦線が表示されないです。。」には新たに返信することはできません。