Question

我在一个简单的html文件中复制/编写了一个简单的“图像网格”。首先我使用了外部css文件。它工作正常。但由于我无法在工作中将外部css文件加载到页面中（仅访问<script> .image-zoom-container { list-style: none; font-size: 0px; } .zoom-container { position: relative; overflow: hidden; display: inline-block; width: 33.33%; font-size: 16px; font-size: 1rem; border: 1px solid #fff; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .zoom-container img { display: block; width: 100%; height: auto; } .zoom-container .zoom-caption { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } .zoom-container .zoom-caption h3 { display: block; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 1.5em; font-weight: 900; letter-spacing: -1px; text-transform: uppercase; color: #fff; margin: 23% 0 0; padding: 10px 0; } </script>之间的html代码），我尝试将所有属性复制到内联样式。但随后，h3消失了。有人可以帮帮我吗？

工作的外部CSS文件：

<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<div class="image-zoom-container">
<div class="zoom-container">
<span style="zoom-caption">
<h3>Text</h3>
</span>
<img src="test.png" />
</div>
</div>

使用此HTML：

<html>
<head>
</head>
<body>
<div style="list-style: none; font-size: 0px;">
    <div style="position: relative; overflow: hidden; display: inline-block; width: 33.33%; border: 1px solid #fff; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box;">
        <a href="#">
            <span style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;">
                <h3 style="display: block; text-align: center; font-size: 1.5em;">Costa Rica</h3>
            </span>
            <img style="display: block; width: 100%; height: auto;" src="Selection_009.png" />
        </a>
    </div>
</div>
</body>
</html>

但是使用内联，它不起作用：

Answer 1

底部块中的内联样式与CSS文件中的样式不同例如，曾经为.zoom-container的div没有指定字体大小。因此，它从其父级（0px）继承字体大小，使其中的文本无形地变小。是的，h3确实有font-size: 1.5em，但1.5×0px仍为0.

解决方案：从.css文件中复制所有 CSS。

此外，您不应将h3放入span。在发布之前验证您的HTML！

H3不显示CSS内联，但使用外部CSS文件

1 个答案: