0

[確認済み: IE9 にも同じバグがあります! :'( ]

img と 2 つの div を含むフォトフレーム スタイルのような div があります。この外側の div には、美しく機能する最大幅 (80%) があります。

問題は、最大高さを設定すると、次の動作が発生することです。

  • 80px - 期待どおりに動作します。
  • 80em - 期待どおりに動作します。
  • 80% - height:auto と同じで、max-height はありません。

何かアドバイス？Doc-type は<!doctype html>であり、これは完全に有効であり、通常は完全に機能します。私も<meta http-equiv="X-UA-Compatible" content="IE=9">欲求不満から追加しました。

編集：

これは、関連性があると思われる html/css です。

<!doctype>
<html>
<頭>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>
<style type="text/css">
html、ボディ、div、スパン、アプレット、オブジェクト、iframe、
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a、略語、頭字語、住所、ビッグ、引用、コード、
del、dfn、em、img、ins、kbd、q、s、samp、
スモール、ストライク、ストロング、サブ、サップ、TT、バール、
b、u、i、センター、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
テーブル、キャプション、tbody、tfoot、thead、tr、th、td、
記事, 脇, キャンバス, 詳細, 埋め込み,
フィギュア、フィグキャプション、フッター、ヘッダー、hgroup、
メニュー、ナビゲーション、出力、ルビ、セクション、概要、
時間、マーク、オーディオ、ビデオ {
    マージン: 0;
    パディング: 0;
    ボーダー: 0;
    フォントサイズ: 100%;
    フォント: 継承;
    垂直整列: ベースライン;
}
/* 古いブラウザーの HTML5 表示ロールのリセット */
記事、さておき、詳細、figcaption、フィギュア、
フッター、ヘッダー、hgroup、メニュー、ナビゲーション、セクション {
    表示ブロック;
}
体 {
    行の高さ: 1;
}
オール、ウル{
    リストスタイル: なし;
}
ブロッククオート, q {
    引用符: なし;
}
blockquote:before, blockquote:after,
q:前、q:後{
    コンテンツ： '';
    内容: なし;
}
テーブル {
    ボーダー崩壊:崩壊;
    ボーダー間隔: 0;
}
体
{
    背景色:黒;
    色: 黒;
    フォントサイズ:80%;
    font-family:'Merriweather',ジョージア,セリフ;   
    最大幅:1600px;
    最小幅:780px;
    テキスト揃え:中央;
    マージン:0 自動;
    行の高さ:1.1;
}
div#コンテナ
{
    テキスト揃え:左;
    パディング:1em 15px;
    マージン:2em 5px;
    位置:相対;
    背景:#FFE4BE;
}


div.image
{
    背景:白;
    最大幅:80%;
    最大高さ:20%; <--- 効果なし!
    オーバーフロー:非表示;
    マージン:0 自動;
    表示ブロック;
    パディング:2em 2% 1em 2%;
}
div.image img { width:100%; マージン:0 自動; 表示ブロック; }
div.image div.title { font-size:160%; font-weight:太字; テキスト揃え:中央; マージントップ:0.25em; }
div.image div.caption { font-style:italic; テキスト揃え:中央; }
</style>
</head>
<本体>
<div id="コンテナ">
<div id="本文">
<div クラス="イメージ">
<img src="construction.jpg">
<div class="title">建設</div>
<div class="caption">
<p>結局のところ、まだベータ版ユーザー向けの準備ができていません.</p>
<p>近日中にメーリング リストを公開する予定です。定期的にチェックしてください!</p>
</div>
</div>
</div>
</div>
</body>
</html>
4

3 に答える 3

0

これには新しいアプローチを採用する必要があります。max-height を使用して画像をスケーリングすることは、単純に間違った方法であり、解決策が気に入るポイントに到達することはほとんどありません。

もし私があなたなら、製図板に戻ってレイアウト (デザインではなく、マークアップと CSS だけ) を再考し、別の方法でデザインの目標を達成しようとします。

于 2011-02-10T08:18:19.343 に答える
0

* htmlすなわちのために使用します。

* html .whatever{
height:100%;
}
于 2011-02-10T02:23:28.403 に答える
0

あなたがしていることについては、画像コンテナに適切なマージンを設定し、最大幅を 100% に設定する方が簡単です。とにかく、最大高さを強制的にビューポートよりも小さくしたくないでしょう。なぜなら、人々は縦にスクロールして大きな/長い画像を見ることに慣れているからです。

于 2011-02-10T02:26:59.880 に答える