css - Max-Height Firefox/Opera/IE

Question

画像に最大高さを設定しようとしています。Safari と Chrome では問題なく動作しますが、Firefox/Opera/IE では動作しません。今、html と body の高さを 100% にする必要があることを読みましたが、jsfiddle を使用すると機能しました。しかし、私のページ(memo-designs.com/portfolio.php)では動きません。

ページのソースは次のとおりです。

<!DOCTYPE html>
    <html>
    <head>
        <title>memodesigns</title>
        <link rel='stylesheet' href='style/stylesheet.css'>
        <script type = 'text/javascript'>
            function displayImage(image, link) {
                document.getElementById('img').src = image;
                document.getElementById('mylink').href = link;
            }

            function displayNextImage() {
                if (x < images.length-1){
                    x++;
                } else {
                    x = 0;
                }
                displayImage(images[x], links[x]);           
            }

            function displayPreviousImage() {
                if (x > 0){
                    x--;
                } else {
                    x = images.length-1;
                }
                displayImage(images[x]);           
            }

            function startTimer() {
                setInterval(displayNextImage, -1);
            }

          var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"

      </script>
    </head>

    <body style = 'background-color: #000000'><div id = 'menucontainer'>
            <div id = 'menu'>
                <p>
                    <ul>
                        <li><a class = 'menu' href = '/'>HOME</a></li>
                        <li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
                        <li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
                        <li><a class = 'menu' href = 'rates.php'>RATES</a></li>
                        <li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
                    </ul>
                </p>
            </div>
        </div>
                <div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
                <p>
                    <img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
                    <img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
                    <img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'>          </p>
            </div>
    </body>

    </html>

css スタイルシート (ここでは一部のみを示します):

*{
    margin:  0;
    padding:  0;
}

html{
    margin: 0;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

body{
    margin: 0px;
    background-color: #f3f4f4;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

私が間違っていることについて何か助けていただければ幸いです:)

score 1 · Accepted Answer

まず、Normalize.cssのようなCSS-Resetの使用を開始することをお勧めします。これにより、ブラウザーはすべての要素をより一貫して最新の標準に沿ってレンダリングできます。

HTML 表記は、ブラウザー間で矛盾を引き起こす可能性もあります。のようなものを<div id = 'menu'>に変え<div id="menu">ます。これにより、IMHOも読みやすくなります。

インラインスタイル属性は、ページの維持を難しくし、意図しないものを上書きする可能性があります。また、すべての要素に適用する必要があるため、ダウンロード時間も長くなります。クラス/IDを使用するのが道です。また、疑似要素はインラインスタイルでは使用できません。開発中の迅速な変更にのみ使用することをお勧めします。Chrome / Firefox の要素インスペクターを使用してすばやく変更し、変更がどのように見えるかを即座に確認し、後で編集内容をコピー/貼り付けします。

したがって、すべての css をスタイルシートに入れるようにしてください。これは、ページの保守性とダウンロード速度の向上 (実動用にファイルを縮小する)のベストプラクティスとも見なされます。

jQuery について聞いたことがあるはずです。使ってみてください。jQuery を使用すると、イメージスライダーのようなものを簡単に開発できます (構文を理解すれば、簡単に習得できます)。さらに、すぐに使用できる jQuery 用のプラグインがたくさんあります。

</body>もう 1 つの "良い習慣" は、ドキュメントの最後、タグの直前に JavaScript を配置することです。詳細については、こちらとこちらをご覧ください。

わかりました、十分なヒントです。手を汚しましょう：

HTML 部分:

<!DOCTYPE html>
<html>
<head>
    <title>memodesigns</title>
    <link rel="stylesheet" href="/assets/css/normalize.css">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>

    <div id="menuContainer">
        <div id="menu">
            <p>
                <ul>
                    <!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
                    <li><a class="menu" href="/">Home</a></li>
                    <li><a class="menu" href="about.php">About</a></li>
                    <li><a class="menu" href="portfolio.php">Portfolio</a></li>
                    <li><a class="menu" href="rates.php">Rates</a></li>
                    <li><a class="menu" href="contact.php">Contact</a></li>
                </ul>
            </p>
        </div>
    </div>

    <div id="contentContainer">
        <p>
            <!-- NOTE: Use IDs only once, else use classes to share css styles -->
            <img id="img" src="http://memo-designs.com/items/doublek-01.png">
            <img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
            <img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
        </p>
    </div>


    <!-- Put the JavaScript at the end of the document just before the closing body tag -->
    <script>
        var images = [], links = [], x = 0,
            baseUrl   = "http://memo-designs.com/items/";
            images[0] = baseUrl + "doublek-01.png";
            links[0]  = baseUrl + "doublek-01.png";
            images[1] = baseUrl + "memodesigns.png";
            links[1]  = baseUrl + "memodesigns.png";

        function displayImage(img, link)
        {
            document.getElementById('img').src = img;
            document.getElementById('mylink').href = link;
        }

        function displayNextImage()
        {
            if (x < images.length-1) x++; 
                else x = 0;

            displayImage(images[x], links[x]);           
        }

        function displayPreviousImage()
        {
            if (x > 0) x--; 
                else x = images.length-1;

            displayImage(images[x]);           
        }

        function startTimer()
        {
            setInterval(displayNextImage, -1);
        }
    </script>

</body>
</html>

...そしてCSS:

/* Assuming you'll use a CSS-Reset */
body {
    background-color: #f3f4f4;
    font:
    ...

    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#menuContainer { ... }
#menu { ... }
#menu ul { ... }

/* Making the menu labels all UPPERCASE */
#menu ul > li {
    text-transform: uppercase;
}

#contentContainer {
    background-color: #000;
    padding-top: 0;
    overflow: hidden;

    /* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
    height: 200px; /* change 200 to your needs */
}
#img {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;

}
#contentContainer .arrow {
    position: absolute;
    top: 40%;
}
#contentContainer .arrow.left {
    left: 0;
}
#contentContainer .arrow.right {
    right: 0;
}

わかりました、提案とコード例を試してください。何が役に立ったか教えてください。

幸運と幸せなコーディング!

css - Max-Height Firefox/Opera/IE

1 に答える 1

Related

Reference