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 doc类型可能会甩掉Mac浏览器......只是一种预感，但您可能希望单独研究它（然后相应地调整HTML）。

标题图片未显示在Mac上的Chrome中，因为实际图片尺寸最终为4px x 4px。图像位于DIV中的A标签中，A标签本身不作为容器，这解释了为什么图像不会显示。

但是，除非你在加载页面后加载一些JavaScript加载图像，否则当前显示的是4px x 4px trans.gif（即使我将A标记设为100px x 100px块容器）

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

当我检查你的CSS文件时，没有任何参考你向我展示的那些图像，这就是它应该是什么样的截图。当我在我的WIndows盒子上时，我会在家中仔细检查页面，但据我所知，这些图片根本无法使用。

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

1 个答案: