0

私は CSS を初めて使用し、これまでレイアウトを作成したことがなく、Internet Explorer での最初のレイアウトでいくつかの問題が発生しています。でも、Firefox では見栄えが良いと思います。レイアウトを開始する前に HTML と CSS について多くのことを読んだので、IE にいくつかのバグがあることはわかっていましたが、レイアウトを作成して問題を調査した後でも、どの解決策も機能していないようです。ここの誰かが助けてくれることを願っています。

TL;DR: IE で新しいレイアウトが機能しない、助けが必要 (調査した)

問題 1: IE では、2 つの右側のサイドバーが Firefox に比べて広すぎます。問題 2: ウィンドウの幅が 1024 未満の場合、container1.css から container2.css に切り替えて、より小さな解像度でより適切に表示されるようにコンテナーのプロパティを効果的に変更する必要があります。 . Firefox では問題なく動作しますが、IE ではコンテナ期間が削除され、コンテンツがウィンドウ全体に流れるように見えます。

<HTML>
<HEAD>
<TITLE>My Liquid Layout</TITLE>
<link rel="stylesheet" type="text/css" href="LiquidLayout.css" />
<link id="container1" rel="stylesheet" type="text/css" href="container1.css" />
<link id="container2"  rel="alternate" type="text/css" href="container2.css" />

<script type="text/javascript">
<!--    

var css = "container1";
function changeStyle(styleSheet)
{
if(styleSheet == css)
    return;
var selected = document.getElementById(styleSheet);
var current = document.getElementById(css);
if(!selected)
{
    selected = current.cloneNode(true);
    selected.id=styleSheet;
    selected.setAttribute("href",current.getAttribute("href").replace(new
   RegExp(css),styleSheet));
}
    current.setAttribute("rel","stylesheet1");
    selected.setAttribute("rel","stylesheet");
    document.getElementsByTagName('head')[0].appendChild(selected);
    css = styleSheet;
    }

function windowSize()
{
var windowWidth;
var windowHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;

if (document.body && document.body.offsetWidth)
{
    windowWidth = document.body.offsetWidth;
    windowHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) 
{
    windowWidth = document.documentElement.offsetWidth;
    windowHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) 
{
    windowWidth = window.innerWidth;
    windowHeight= window.innerHeight;
}

if(windowWidth < 1024)
changeStyle('container2');
else if(windowWidth >= 1024)
changeStyle('container1');
}

window.onresize = new Function("windowSize()");
//-->   

</script>   

</HEAD>
<BODY>
<div id = "container">
<div id = "header"><p id = "size"></p></div>
<div id = "content">
    <div id = "menu">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">IGN</a></li>
        </ul>
    </div>
    <div id = "sidebox"></div>
    <div class = "column" id = "sidebar"></div>
    <div class = "column" id = "main"></div>    
</div>
<div id = "footer"></div>
</div>

</BODY>
</HTML>

主な CSS は次のとおりです。

body 
{
background-color:gray;
margin: 0px;
text-align: center;
}

#header
{
width: 100%;
height: 200px;
background-color: yellow;

}

#content
{
padding-top:5px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
min-height: 768px;
}

#menu
{
width: 66%;
height: 250px;
background-color: blue;
float: left;
}

#sidebox
{
width: 34%;
height: 250px;
background-color: red;
float: right;
display: inline;
}

#sidebar
{
width: 34%;
background-color: red;
height: 100%;
float: right;
}

#main
{
width: 65%;
height: 100%;
background-color: green;
float: left;
}

誰かが IE でこれらの問題を解決するためのアドバイスを提供していただければ幸いです! 改善のための提案も大歓迎です

4

2 に答える 2

0

全体をコピーして貼り付けた場合、Doctype が見つからないため、IE は quirksmode でレンダリングされます。

ドキュメントの先頭に HTML5 doctype を追加することをお勧めします<!DOCTYPE html>

quirks モードの詳細については、こちらを参照してください。

于 2012-04-17T09:13:11.973 に答える
0

IE のバージョンを指定しなかったので、最新バージョンのみを確認したと思いますか?

提案されているように doctype を追加すると、IE9 で問題ないはずですが、IE の他のバージョンもサポートしている場合は、それぞれのバージョンに異なるバグがあり、次第に悪化するため、各バージョンを個別にターゲットにする何らかの方法が必要になります。ときどき、IE7 では機能するが IE8 では機能しないことがありますが、通常、IE6 に向かうにつれて、特にリキッド レイアウトでは問題が指数関数的に増加します。

使用している IE のバージョンに応じて HTML 要素に異なるクラス名を追加するModernizrを使用することをお勧めします。また、古い IE で HTML5 要素をスタイル可能にするなど、他の多くの機能も実行するため、他の機能テストがなくても使用する価値があります。HTML5 要素を使用していないことがわかりますが、それがレイアウト全体なのか、それとも最初だけなのかはわかりません...

ほとんどの有用な CSS3 機能を IE8 以下でも使用できるように、おそらくSelectivizrも使用する必要がありますが、これには jQuery などの JS ライブラリを使用する必要があるため、役立つ場合とそうでない場合があります。あなたのCSSにはCSS3はありませんが、あなたの例ははるかに単純化できます

コードの改善という点では、script タグに HTML コメントを含める必要はありません<!--。さらに、パフォーマンス上の理由から、 HTML5 doctype を使用する場合 (HTML5 要素を使用する予定がない場合でも使用できます) ではなく、の下部<body>(終了の直前) に移動する必要があります。 )要素に type 属性を指定する必要はありません。JavaScript では、開き中かっこは関数定義または条件と同じ行に配置する必要があるため、次のようにします。</body><head><script>

if (condition) {

また：

function something() {

ではない:

if (condition)
{

また：

function something()
{

通常、これはほとんどの場合問題ありませんが、発見するのが非常に難しいバグが発生する可能性があるため、常に実行する習慣を身に付ける価値があります。また、イベント リスナーをアタッチする場合、指定する必要はありませんnew Function("function_name")。関数を直接アタッチするだけで済みます。

window.onresize = windowSize();

また、CSS では、ゼロ値は測定単位を指定する必要がないため、0代わりに0px...を使用できます。

于 2012-04-17T07:51:37.473 に答える