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

Question

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

可以在这里找到实际的站点:(很多正在 build 中)

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 标签本身不充当容器，这解释了为什么图片无法显示。

但是，除非您在页面加载之后或期间对图像进行一些 JavaScript 加载，否则当前显示的只是 4px x 4px trans.gif(即使我将 A 标记设为 100px x 100px block 容器) .

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

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