こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

(CSS)table-cellをIEで表示させる

いつもお世話になっております。

table-cellを使って、インターネットエクスプローラーでも
問題なく表示される方法を探しております。

ご存知の方はどうぞお知恵をお借りしたいです。


macのdreamweaverでサイトを制作しています。

添付イメージのように、
画像が等間隔に並んでいるサイトデザインの為、
最初は普通のテーブルタグで作っていたのですが、

アップをしてみると画像と画像の間の幅が均等にならなかったので、
table-cellを使用して作ってみました。

そうすると理想とする形になったのですが、
IE8で見ると崩れ正しく表示されませんでした。

そもそもこのタグを使うとIEでは表示されないのでしょうか?
もしそうであれば、添付画像のように、
画像と画像の隙間を等間隔にしたいだけなので、
その他の方法をご存知の方は教えて頂けたらとても助かります。



タグは以下のように書いています。

『CSS』

nav.global-navi ul {
border: none;
text-align: left;
width: 880px;
margin-left: 180px;
display: table;
table-layout: fixed;
}

nav.global-navi ul li {
display: table-cell;
}

nav.global-navi ul li:last-child {
border-right: none;
}

nav.global-navi ul li a {
font-weight: bold;
text-decoration: none;
margin: 3px 4px;
display: block;
}

nav.global-navi ul li a:hover {
background:#FFFFFF;
}

『html』

<nav class="global-navi">
<ul>
<li>画像1</li>
<li>画像2</li>
<li>画像3</li>
<li>画像4</li>
</ul>
</nav>


思うように表示されずに大変困っています。
お力をお借りしたいのでどうぞ宜しくお願い致します。

投稿日時 - 2014-02-01 02:55:44

QNo.8456021

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

>目指しているのはimg同士の間隔が縦横共に等間隔で
>どのデバイスでも見ることが出来るサイトです。
それは厄介。
 幅を固定して良く、かつ順番が変わってよいなら、float:left;+float:right
※幅が二種類と固定されるなど条件がある。また大きな画像が登場する順番によると、画像の抜ける場所がでてくる。
 

投稿日時 - 2014-02-03 19:53:18

ANo.1

添付画像と言われるものがないので、分かりませんが
>画像が等間隔に並んでいる
の意味が不明です。隙間が等間隔ならmargin:0 20px;でよいはずですし、間隔が同じならwidth:でよいはずです。
ざっと思いつく方法は・・
・画像間隔が等間隔
・リンクが等間隔(table風)
・画像の横サイズを固定して等間隔
・画像の縦サイズ固定で画像間等間隔
あたりですね。いずれも簡単です。

 IE8はHTML5の<nav>は理解できないので、javascriptを使用しますが、古いIEも考慮するならjavascriptが無効でも利用できるようHTML4.01strict!!で製作しましょう。strictなら、そのまま将来HTML5に移行出来る。<div class="header"></div>→<header></header>など、section,footer,navも同様。

★リキッドですら、スマホも幅広ディスプレイもOK!、(ウィンドウ幅を変えてみること)
★印刷用はリストですが、URLが印刷される。
★<ul></ul>内はすべて同じなので省略
★画像は適当なサイズを用意すること200×150,150×200,200×200など
★タブは_に置換してあるので戻す。
★HTML4.01strict+CSS2.1 ウェブ標準
★IE7以降対応

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
a img{border:none;}
div.nav{width:90%;min-width:700px;margin:10px auto;text-align:center;}
div.nav ul:after{content:"";display:block;clear:left;}
div.nav ul{list-style:none;margin:0;padding:0;background-color:gray;}
div.nav ul li{display:block;float:left;height:220px;position:relative;margin:5px;}
div.nav ul li img{margin:10px;}
div.nav ul li a{display:block;width:100%;height:100%;background-color:silver;}
div.nav ul li a:hover{background-color:white;}
div.section.type1 div.nav ul li{width:220px;}
div.section.type2 div.nav ul li img{display:block;width:160px;height:auto;margin:auto;}
div.section.type3 div.nav ul li a{padding:2px;}
div.section.type3 div.nav ul li img{display:block;width:auto;height:150px;margin:auto;}
-->
_</style>
_<style type="text/css" media="print">
<!--
a img{border:none;}
div.nav ul{list-style-type:none;}
div.nav a{text-decoration:none;}
a:after{
content:"   "attr(title)" URL:http://hoge.com"attr(href);
}
div.section{page-break-inside:avoid;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1 id="title">Title</h1>
_</div>
_<div class="section">
__<div class="nav">
___<h3>画像間隔が等間隔</h3>
___<ul>
____<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li>
____<li><a href="/Products" title="製品"><img src="./images/02.jpg" width="150" height="200" alt=""></a></li>
____<li><a href="/news" title="ニュース"><img src="./images/03.jpg" width="200" height="200" alt=""></a></li>
____<li><a href="/manual" title="マニュアル"><img src="./images/04.jpg" width="150" height="200" alt=""></a></li>
____<li><a href="/downLoad" title="ダウンロード"><img src="./images/05.jpg" width="200" height="150" alt=""></a></li>
____<li><a href="/help" title="ヘルプ"><img src="./images/06.jpg" width="200" height="150" alt=""></a></li>
____<li><a href="/contact" title="問合せ"><img src="./images/07.jpg" width="200" height="150" alt=""></a></li>
___</ul>
__</div>
_</div>
_<div class="section type1">
__<div class="nav">
___<h3>リンクが等間隔(table風)</h3>
___<ul>
____<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li>
____<!-- 省略 -->
___</ul>
__</div>
_</div>
_<div class="section type2">
__<div class="nav">
___<h3>画像の横サイズを固定して等間隔</h3>
___<ul>
____<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li>
____<!-- 省略 -->
___</ul>
__</div>
_</div>
_<div class="section type3">
__<div class="nav">
___<h3>画像の縦サイズ固定で画像間等間隔</h3>
___<ul>
____<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li>
____<!-- 省略 -->
___</ul>
__</div>
_</div>
_<div class="footer">
__<h3>A nice footer</h3>
_</div>
</body>
</html>

投稿日時 - 2014-02-01 11:46:08

お礼

お早いご回答をありがとうございます。
わざわざタグまでご記入頂いて感激しております。
また、いずれも簡単、というお言葉とても勇気が沸きました。

画像の添付が出来ていなかったようで
大変失礼致しました。

まさしく仰る通り、
・画像間隔が等間隔
・リンクが等間隔(table風)
を求めております。

ややこしいことになってしまったのは、
添付ファイル画像二行目の、サイズの違うimgが上手く
タグで表現出来なかった為でした。

目指しているのはimg同士の間隔が縦横共に等間隔で
どのデバイスでも見ることが出来るサイトです。

さっそく今からお教え頂いたタグで作業に取り掛かりたいと思います。

大変恐縮ですが、もし上記のように、
同サイズの画像の中に別のサイズのものが含まれているが等間隔に調整出来る
方法をご存知でしたら教えて頂けたら嬉しいです。

どうぞ宜しくお願い致します。

投稿日時 - 2014-02-02 00:07:53

あなたにオススメの質問