![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
下記のようなページを作成するとFireFoxで崩れるのですが、回避方法を教えていただきたいです。
html 4.01 transitional
<table>
<tr>
<td>
<h2>aaaaaa</h2>
<p>AAAAAAAAAAA</p>
</td>
<td>
<h2>aaaaaa</h2>
<p>AAAAAAAAAAA</p>
</td>
</tr>
</table>
/* CSS */
td{
position: relative;
}
td p{
position: absolute;
bottom: 0;
}
tdの内容量が左右バラバラでも、
P要素だけ高さを合わせたくてこのような指定をしていますが、
IEではP要素がtdの底辺に沿うものの、
FF・Operaなどではウィンドウの底辺に沿ってしまいます。
現象はtdに position指定をしない状態と同じです。
宜しくお願いします。
html 4.01 transitional
<table>
<tr>
<td>
<h2>aaaaaa</h2>
<p>AAAAAAAAAAA</p>
</td>
<td>
<h2>aaaaaa</h2>
<p>AAAAAAAAAAA</p>
</td>
</tr>
</table>
/* CSS */
td{
position: relative;
}
td p{
position: absolute;
bottom: 0;
}
tdの内容量が左右バラバラでも、
P要素だけ高さを合わせたくてこのような指定をしていますが、
IEではP要素がtdの底辺に沿うものの、
FF・Operaなどではウィンドウの底辺に沿ってしまいます。
現象はtdに position指定をしない状態と同じです。
宜しくお願いします。
|
|
|
|
コメント(9)
table に使用される各要素には、それぞれ、対応する display プロパティ値が設定されています。
table 要素 → display: table;
tr 要素 → display: table-row;
td 要素 → display: table-cell;
ie では display: block; のようですが……。
そのため、上記のプロパティ値に引きずられて、position:relative; や position:absolute; が使えないようです。
なので、position プロパティで位置をずらしたいセルに対しては、display:block; を指定してあげると、うまくいくと思います。
で、これは、多分、FireFox の動作が正しく、IE は上述のプロパティ値に対応していないため、display:block; になっているから動作しているだけっぽいので、実は IE の未実装というオチではないかと……。
table 要素 → display: table;
tr 要素 → display: table-row;
td 要素 → display: table-cell;
ie では display: block; のようですが……。
そのため、上記のプロパティ値に引きずられて、position:relative; や position:absolute; が使えないようです。
なので、position プロパティで位置をずらしたいセルに対しては、display:block; を指定してあげると、うまくいくと思います。
で、これは、多分、FireFox の動作が正しく、IE は上述のプロパティ値に対応していないため、display:block; になっているから動作しているだけっぽいので、実は IE の未実装というオチではないかと……。
> 拳骨斎さん
ありがとうございます。
display の table 関連は、深く考えたことがなかったので勉強になります。
display: block; にしてみましたが、そうすると div で組んだのと同じような表示になってしまい
float やら何やらでレイアウトする必要が出てきて、td の高さも隣のセルと合わなくなってしまったので、
結局P要素の高さを同じにするには、それなりに手間をかけないとダメなようでした。
しかし position が使えない要素ってあるんですね。
勉強不足を実感しましたが、参考になるお話が聞けてよかったです。
Takazudoさんもありがとうございました。
ありがとうございます。
display の table 関連は、深く考えたことがなかったので勉強になります。
display: block; にしてみましたが、そうすると div で組んだのと同じような表示になってしまい
float やら何やらでレイアウトする必要が出てきて、td の高さも隣のセルと合わなくなってしまったので、
結局P要素の高さを同じにするには、それなりに手間をかけないとダメなようでした。
しかし position が使えない要素ってあるんですね。
勉強不足を実感しましたが、参考になるお話が聞けてよかったです。
Takazudoさんもありがとうございました。
いえいえー自分もなんでならんのだろとおもったので。
tdをblockにしても、tableでは、レンダリング上、足りない要素は自動的に補われているかもしれんです。
たぶんこのばあい、その上に自動的にtable-cell要素が補われるので、高さ一杯にはならないのかなと。
<table>
<td>hoge</td>
<td>hoge</td>
</table>
とやっても、ちゃんと表示してくれてしまうように、
たとえば、<div>hoge</div>
div{display:table-cell}
といきなりおいても、レンダリング上
<table><tbody><tr><td>hoge</td></tr></tbody>
と同じように表示してくれたりします。
てなことが仕様書のtableの項にあったようなきがします〜
tdをblockにしても、tableでは、レンダリング上、足りない要素は自動的に補われているかもしれんです。
たぶんこのばあい、その上に自動的にtable-cell要素が補われるので、高さ一杯にはならないのかなと。
<table>
<td>hoge</td>
<td>hoge</td>
</table>
とやっても、ちゃんと表示してくれてしまうように、
たとえば、<div>hoge</div>
div{display:table-cell}
といきなりおいても、レンダリング上
<table><tbody><tr><td>hoge</td></tr></tbody>
と同じように表示してくれたりします。
てなことが仕様書のtableの項にあったようなきがします〜
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
