1

好的，这是一个有趣的。

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

这是问题所在：除了在 IE9 中，阴影只出现在框上，而不是文本上，我可以完美地工作。

如果我display:inline从 CSS 中删除，那么它在 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/

谢谢你。

4

1 回答 1

0

I added a margin property in the h1. This makes it possible to get rid of display: inline; and still get the same result, but longer text skips to another line. Kind of like if you had a set width, which I know you didn't want. Here's the fiddle anyway, if it helps

于 2013-08-03T02:46:53.707 回答