テーブルを使用せずに、長いリストを 3 つの列にまとめようとしています。このリストは、シャドー ボックスにポップアップ表示されます。ただし、3 番目の DIV (フロート右 DIV) は、Chrome では他の 2 つの下に表示されますが、Safari、FF、または IE では表示されません。これに対する説明/修正はありますか?
ここにいくつかのコードがあります:
<div style="float: left; width: 30%; position: relative;display: block;">
<P class="list">Aareon</p>
<P class="list">ABC Systems and Development</p>
...ect
</div>
<div style="float: left; width: 30%; position: relative; display: inline-block;">
<P class="list">EDS</p>
<P class="list">Electoral Office</p>
...ect
</div>
<div style="float: right; width: 30%; position: relative; display: inline-block;">
<P class="list">Pfizer Adams</p>
<P class="list">Philips Electronics</p>
...ect
</div>
CSS
P.list {margin:5px 0px; line-height:16px;padding-left:10px;text-indent:-7px}
P.list:before {content:url('../images/bullet.png');position:relative;left:-3px
}
*インラインブロック、位置:相対、およびシャドーボックスのポップアップサイズを大きくせずに試しました。*シャドウボックスのコードは、他のページと連携するので問題ありません。