Div 大小不适用于所有浏览器

Question

我有一个简单的 css 图像翻转。我已经验证了代码，它的工作方式与 Firefox 和 Chrome 上的工作方式完全一样，但有人指出它无法在 Safari、Opera 或任何 Mac 浏览器中工作。我在页面下方有一个非常类似的滚动，效果很好。我已经多次检查代码，寻找拼写错误或任何东西来解释发生了什么，但我不知所措。

实际站点可以在这里找到：（正在建设中）

http://www.printyourpowerpoint.com /dev2/index.php

这是 HTML：

    <div id='header'>
        <div class='header-first' id='header-logo'>
            <a href='index.php'><img src='images/trans.gif' alt='Print Your PowerPoint Home'/></a>
        </div>
        <div class='header-item' id='header-why'>
            <a href='why-us.php'><img src='images/trans.gif' alt='Why Print Your PowerPoint?'/></a>
        </div>
        <div class='header-item' id='header-products'>
            <a href='products.php'>
                <img src='images/trans.gif' alt='Print Your PowerPoint Products'/>
            </a>
        </div>
        <div class='header-item' id='header-about'>
            <a href='about.php'>
                <img src='images/trans.gif' alt='About Print Your PowerPoint?'/>
            </a>
        </div>
        <div class='header-item' id='header-cart'>
            <a href='cart.php'>
                <img src='images/trans.gif' alt='View Cart'/>
            </a>
        </div>
        <div class='header-right'>
            <div class='header-item' id='header-create'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='Create Account'/>
                </a>
            </div>
            <div class='header-item' id='header-account'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='My Account'/>
                </a>
            </div>
        </div>
    </div>

这是 CSS：

div {
float: left;
}
#header {
width: 900px;
height: 85px;
}
.header-first {
    background: top center no-repeat;
    height: 70px;
    margin: 7px 15px 7px 56px;
    }
.header-item {
    background: top center no-repeat;
    height: 30px;
    width: 101px;
    margin: 45px 15px 7px 15px;
    }
.header-item2 {
    margin: 0px 20px;
    width: 136px;
    height: 132px;
    background: top center no-repeat;
    }
.header-right {
    float: right;
    margin-top: 46px;
    height: 30px;
    }
.header-item img {
    height: 30px;
    width: 101px;
    }
.header-first img {
    height: 70px;
    }
.header-item:hover, .header-first:hover {
    background: bottom center no-repeat;
    }
#header .header-right .header-item {
    margin:0px;
    }

#header-logo {
    background-image: url('images/print-your-powerpoint-logo-top.png');
    }
    #header-logo, #header-logo img {
        width: 82px;
        }

#header-why {
    background-image: url('images/header-why-us.png');
    }
    #header-why, #header-why img {
        width: 101px;
        }

#header-products {
    background-image: url('images/header-products.png');
    }
    #header-products, #header-products img {
        width: 111px;
        }

#header-about {
    background-image: url('images/header-about.png');
    }
    #header-about, #header-about img {
        width: 89px;
        }

#header-cart {
    background-image: url('images/header-cart.png');
    }
    #header-cart, #header-cart img {
        width: 62px;
        }

#header-create {
    background-image: url('images/header-create.png');
    }
    #header-create, #header-create img {
        width: 107px;
        }

#header-account {
    background-image: url('images/header-my-account.png');
    border-left: 1px solid #C2B59B;
    }
    #header-account, #header-account img {
        width: 107px;
        }

Answer 1

对于初学者来说，您选择的 XHTML 文档类型可能会抛弃 Mac 浏览器……只是一种预感，但您可能需要单独研究它（然后相应地调整您的 HTML）。

标题图像不会显示在 Mac 上的 Chrome 中，因为实际图像大小最终为 4px x 4px。图像位于 DIV 内的 A 标记中，而 A 标记本身并不充当容器，这解释了图像无法显示的原因。

但是，除非您在页面加载之后或同时加载图像，否则当前显示的只是 4px x 4px trans.gif（即使我将 A 标记设为 100px x 100px 块容器）。

查看 JavaScript 控制台和下载的资源，实际上没有下载任何标题图像。您可以通过在控制台的“资源”或“网络”选项卡中查找该信息来测试该信息。

当我检查您的 CSS 文件时，没有提及您在“这就是它应该是什么样子”屏幕截图中向我展示的任何图像。当我使用 WIndows 盒子时，我会在家里仔细检查该页面，但据我所知，这些图像根本不可用。