-2

当我尝试对此进行研究时，我发现很难将这种情况与备受争议的图像替换讨论和辩论区分开来，但就我而言，我想同时使用图像和文本。

问题是我想要同时拥有徽标和图像，但显然标题想要在它自己的行上，所以我将图像向左浮动以获得所需的效果。对我来说似乎很好，但我不记得以前遇到过这个问题，我真的需要第一次解决这个问题，所以我的问题是：这种方法有什么问题吗，有没有值得考虑的替代方法？任何进一步的考虑，例如我没有看到任何需要清除浮动，但也许我应该在 h1 标签之后做。

<html>
<head>
    <style>
    h1 {
    line-height:100px;
    font-size:75px;
    background:#eee;
    }

    img#logo {
    margin-right:20px;
    float:left;
    }
    </style>
</head>

<body>
    <img id="logo" src="http://placehold.it/100x100">
    <h1>Title</h1>
    <p>Page Content ...</p>
</body>
</html>

这是 JSFiddle http://jsfiddle.net/CAc3E/

4

3 回答 3

2

很好，但是将标题和徽标包装在<header>标签中会更有意义：

<body>
    <header>
        <img id="logo" src="http://placehold.it/100x100">
        <h1>Title</h1>
    </header>

    <section role="main">
        ...
    </section>

    <footer>
        ...
    </footer>
</body>

此外，CSS 与语义无关，您可以使用 aclear或省略它。它只对您的访问者很重要，而不是搜索引擎如何看待您的网站。

于 2012-06-04T21:10:31.240 回答
1

我认为这种方法没有任何问题。搜索引擎应该忽略图像，每个人都很高兴。就我个人而言，我将徽标放在h1标签内只是因为我很懒惰，但我实际上并没有测试过它的缺点，所以请谨慎使用。

由于您强制标题与图像高度相同，因此我也不会预见到缺少clear样式会导致任何问题。但是，当然，在你发布这样的东西之前，在最坏的情况下测试浏览器（特别是 IE7 和 IE6，如果你的目标受众真的很糟糕）。

于 2012-06-04T21:11:06.203 回答
1

您应该问自己，徽标图像本身是否为页面提供了任何有意义的内容，或者它是否纯粹是一种视觉辅助。例如，如果您的徽标图像的替代文本属性类似于“公司徽标”，那么可能就是后者。我知道您不想使用图像替换技术来完全摆脱文本，但您可能会尝试使用徽标图像作为标题元素的背景，即：

<head>
    <style>
    h1#logo {
        background:url("http://placehold.it/100x100") 0 0 no-repeat #eee;
        font-size:75px;
        height: 100px;
        line-height: 100px;
        text-indent: 120px;
    }
    </style>
</head>

<body>
    <h1 id="logo">Title</h1>
    <p>Page Content ...</p>
</body>
</html>

您需要根据自己的喜好进行调整，但这是一般的想法。

于 2012-06-04T21:15:55.310 回答