0

stackoverflowは多くのクールなことを学ぶのに役立ちましたが、残念ながら私は何かに行き詰まっていて、それから抜け出す方法を研究する方法がわかりません。

私はうまく機能し、まさに私が望むものであるWebサイトをレイアウトしました。それは、LemmonSlider.jsと呼ばれる優れたプラグインを使用し、レイアウトで完全に流動的にすることができました...ほぼ！

問題は、Safari、iOS、Chromeで完全に機能することですが、Firefoxでテストすると、状況が悪くなり、非常に悪くなります。IEでテストしたことはありませんが、同じようにファンキーなものになると思います。

以下は、私が何をしたかを理解するための簡略化されたコードです...

本文にmin-height、htmlタグを使用してみましたが、役に立たないようです。

どんな入力でも大歓迎です

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Example layout for the nice folk at stackoverflow</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
        <style type="text/css">
            html, body {
                width:100%;
                height:100%;
                padding:0;
                margin:0;
                background-color:red;
            }
            #content {
                position:absolute;
                top:50%;
                margin-top:-25%;
                width:100%;
                height:50%;
                background-color:blue;
                overflow:hidden;
            }
            #content ul {
                position:relative;
                margin:0;
                padding:0;
                height:100%;
                background-color:yellow;
            }
            #content li {
                list-style:none;
                float:left;
                height:inherit;
                background-color:orange;
                margin:0px 10px 0px 10px;
            }
            #content img {
                height:inherit;
            }
        </style>
        <script type="text/javascript">
            $(window).bind('resize', function () {
                location.reload();
            });
        </script>
    </head>
    <body>
        <div id="content">
            <ul>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
            </ul>
        </div>
    </body>
</html>
4

1 に答える 1

0

#contentを変更する

#content {
  position:absolute;
  top:25%;
  width:100%;
  height:50%;
  background-color:blue;
  overflow:hidden;
}

それ以外の場合...CSSに投資しない場合。私は完全に1140グリッドを使用することをお勧めします。グリッドにはレスポンシブデザイン用のメディアクエリも付属しています。

これがあなたのために働くことを願っています

乾杯

于 2012-07-07T05:44:17.093 に答える