Question

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

    <head>

        <!-- META -->
        <title>Nina Rakovec</title>
        <meta name="description" content="Profesionalna igralka" />

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" href="/favicon.ico" />

    </head>

    <body>

            <div class="image"></div>
            <a href="http://www.ninarakovec.com/eng/"><div class="eng"></div></a>
            <a href="http://www.ninarakovec.com/slo/"><div class="slo"></div></a>

    </body>

</html>

CSS：

    body {
  background: url("ninabg.jpg") left top no-repeat;
  background-size: 100% auto;
}

div.image {
    overflow: hidden;
    content:url("logo2fix.png");
    position:absolute;
    right:1%;
    bottom:3%;
    height:40%;
    width:35%;
}

div.slo {
    content:url("slo.png");
    position:absolute;
    width:5%;
    bottom:10%;
    right:21%;
}

div.eng {
    content:url("eng.png");
    position:absolute;
    width:5%;
    right:12%;
    bottom:10%
}

这是代码，它在Chrome中正常显示，但在Internet Explorer或Firefox中没有显示。我究竟做错了什么？唯一显示的是背景，3 div标签没有出现，我不明白为什么。提前谢谢，我需要这个固定的，我很无能为力。

Answer 1

在HTML 4.01中，<div>中的<a>元素不是有效标记。根据规范，<a>标记只能包含内联元素。 <div>是块级元素。请注意，由每个浏览器决定如何处理此类情况。虽然Chrome可能会修复内容或以您希望的方式呈现内容，但Firefox和IE完全有可能将其视为完全无效并且无法呈现部分或全部标记（或剥离div标记并保留内容完整）

请参阅此问题以获取进一步参考：Is putting a div inside an anchor ever correct?。

参考： HTML 4.01 Specification

Answer 2

你不应该使用'内容＆＃39;属性显示这样的图像。它旨在与伪元素一起使用。

如果这些div需要bg图像，请使用background-image属性。

div.image {
    overflow: hidden;
    background-image::url("logo2fix.png");
    position:absolute;
    right:1%;
    bottom:3%;
    height:40%;
    width:35%;
}

div.slo {
    background-image::url("slo.png");
    position:absolute;
    width:5%;
    bottom:10%;
    right:21%;
}

div.eng {
    background-image:url("eng.png");
    position:absolute;
    width:5%;
    right:12%;
    bottom:10%
}

<div>标签在Chrome中运行，但不在Firefox / IE </div>中运行

2 个答案: