私のウェブアプリケーションでタブを作成するために私はthis guideに従っています。 この例のコードと同じコードを使用していますので、参照として使用することができます。タブの可用性の問題IE
最後のパルグラフでは、IEでの計算上の問題があるようです。 IEではFirefoxですべてが機能しますが、レイアウトは本当に悪いです。
ここに記載されている解読法を追加すると：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">または<!DOCTYPE html>タブはInternet ExplorerとFirefoxの両方で正しくレンダリングされますが、コンテナはページの内容を途中で切っているようです。
私はCSSのコンテナ要素で遊んでみましたが、何も役立たないようです。
いずれかのアイデア...？
doctypeが間違っており、quirksモードになっています。この1つを使用してください：<!DOCTYPE html>
私は個人的に同じことを行うにはjavascript/jqueryを使用します。私は、今日これを使って行っている仕事のサンプルをいくつか取り上げました。
ナビゲーションバーには、タブ用のdivがあります。例えば
<div id="home">Home</div>
<div id="about">About</div>
メニューバーの下にあるコンテンツ部門にあります。
<div id="content-holder">
<div id="content1"></div>
<div id="content2"></div>
</div>
これら2つのタブ欄のCSS。
#home
{
padding:4px 10px 4px 15px;
cursor:pointer;
}
#about
padding:4px 10px 4px 15px;
cursor:pointer;
}
と遷移を制御するjavascript/jquery。
var homeUrl = "link to content 1"
var aboutUrl = "link to content 2"
$("#home").click(function() {
$("#content-holder").load(homeUrl);
});
$("#about").click(function() {
$("#content-holder").load(aboutUrl);
});
iframeを使用している場合、iframeはすべてのコンテンツを保持するか、またはスクロールバーを持つのに十分な大きさである必要があります。 Iframeの高さはCSSではなくインラインに設定されます。
も同様です。同じ振る舞い – Joly
@Joly - あなたのマークアップには、元のマークアップが本当にうまくいっていると仮定すると、それに影響を与える何か他のものがあります。 – Rob
私のものはまったく同じですが、おそらく彼は別の/古いブラウザのバージョンでテストしていました。私はFF8とIE8を使用しています。あなたはこの例を試してみることを歓迎します:) – Joly