0

問題は object タグです。高さ方向のスケーリングを拒否するだけです。クロムは完璧に機能します。IE と firefox ではデフォルトの高さのままです。クロスブラウザ コードを見つけるのに非常に苦労しています。私が他のスレッドやサイトから見つけたものから、親コンテナーには高さを設定する必要があるということがわかりました。そのため、html と body に高さの設定が表示されます<div id="calendar">。理論は理解できても、まだうまくいきません。

補足: インライン css の理由は、私が css テストを行う場所です。オブジェクトは80以上のファイルのようであり、jsfiddleをうまく使用する方法がわからず、カレンダーをそこに入れることができないように感じるので、フィドルを作成しませんでした。

<!DOCTYPE html>
<html style="height: 100%" >
<body style="height: 100%" >
    <form >
    <div id="calendar" style="height: 70%">
        <object data="calendar.php" width="50%" style="height: 100%"/>
    </div>
    </form>
</body>
</html>
4

2 に答える 2

1

問題はobject tag、タグがどこにあるのかということです。そして、なぜこれが必要なのかという質問に対して

html, body {
   height: 100%;
   width: 100%;
}

子要素に使用すると、何height: 70%;が問題70%になるのでしょうか? したがって、親に高さを定義する%と70%、100%

于 2012-12-11T18:11:12.903 に答える
0

あなたのコードはSafariでも壊れていましたが、私のソリューションはそれを修正したようです.

このバージョンは以下を検証します。

http://jsfiddle.net/zu9cL/

多分それはあなたのために働くでしょう。通常、Explorer は無効なコードを嫌います。

2 つの根本的な問題があったと思います。

  • 50%属性内で使用されwidth、不適切に閉じられた<object>タグ (無効な HTML)

  • height親要素の定義に失敗しました<form>

デモではインライン CSS を使用しませんでしたが、必要に応じて CSS を「インライン」に戻しても問題ありません。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <div id="calendar">
                <object data="calendar.php"></object>
            </div>
        </form>
    </body>
</html>

CSS:

html, body, form {
    height: 100%;
}
#calendar {
    height: 70%;
}
object {
    height: 100%;
    width: 50%;
}

「インライン」に配置されたCSSでもすべて同じように機能します。

jsFiddle デモ

HTML:

<!DOCTYPE html>
<html style="height: 100%;">
    <head>
        <title></title>
    </head>
    <body style="height: 100%;">
        <form style="height: 100%;">
            <div id="calendar" style="height: 70%;">
                <object data="calendar.php" style="height: 100%; width: 50%;"></object>
            </div>
        </form>
    </body>
</html>
于 2012-12-11T19:43:19.493 に答える