Question

好的，这是一个有趣的。

我有一个显示在框中的<h1>标题（我的意思是屏幕上的可见框，如border:solid 3px white）。盒子本身以及里面的文本需要有一个阴影。该框不能是固定宽度，因为框内的文本会因页面而异。

问题在于：除了在IE9中，我才能完美地工作，其中阴影只出现在框中，而不是文本。

如果我从CSS中删除display:inline，那么它在IE9中正常工作，但随后该框是整个容器的宽度，而不是在文本周围。所以我认为解决方案的关键是找到一种更好的方法来将文本和框放在容器内部，这样就可以删除display:inline;。

标记非常简单：

<style>
.container {
    width:500px;height:200px;padding:50px;background:#eee;
    text-align:center;
}

h1 {
    font-size:34px;
    color:white;
    padding:25px;
    border:solid 3px white;
    letter-spacing:7px;
    display:inline;

    box-shadow: 0 0 6px #666;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>

<div class='container'>
    <h1>Testing</h1>
</div>

你可以在这里玩它：http://jsfiddle.net/j434X/4/

谢谢。

Answer 1

我在h1中添加了margin属性。这样可以摆脱display: inline;并仍然获得相同的结果，但更长的文本会跳到另一行。有点像你有一个设定的宽度，我知道你不想要的。 Here's the fiddle无论如何，如果它有帮助

如何将H1与边框居中，同时丢弃显示：内联？

1 个答案: