0

我在 Internet Explorer（Internet Explorer 7 Internet Explorer 8）中通过以下 CSS 应用了一个带有框阴影的 div。

box-shadow:        0px 0px 15px #FF00CC;
-o-box-shadow:     0px 0px 15px #FF00CC;
-moz-box-shadow:   0px 0px 15px #FF00CC;
-webkit-box-shadow:0px 0px 15px #FF00CC;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270),
        progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
background-color:#FFFFFF;
border:1px solid #FF00CC;

它给了它一个盒子阴影，但是使里面的文字变得模糊和难看，也就是黑色的文字失去了清晰度：

在此处输入图像描述

如果没有盒子阴影属性，它是这样的：

在此处输入图像描述

除了给 div 一个盒子阴影之外，我怎样才能使内部文本正常？

4

2 回答 2

2

它可以在 Internet Explorer 8 中通过在内容中包含一个额外的 div 来克服，position:relative;文本再次具有它的荣耀：

<div class="shadow-box">
    <div style="position:relative;">Lorem ipsum dosectetur adipisicing elit</div>
    </div>

    .shadow-box {
        box-shadow:        0px 0px 15px #FF00CC;
        -o-box-shadow:     0px 0px 15px #FF00CC;
        -moz-box-shadow:   0px 0px 15px #FF00CC;
        -webkit-box-shadow:0px 0px 15px #FF00CC;
        zoom: 1;
        filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270),
                progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
        background-color:#FFFFFF;
        border:1px solid #FF00CC;
    }

但是在 Internet Explorer 7 中，如果您使用阴影过滤器，它会删除字体上的 cleartype 属性，并且根据我的搜索没有任何修复

感谢CSS Box Shadow和How to simulation CSS3 box-shadow in IE 6-8 without JavaScript。.

于 2012-06-28T11:53:45.757 回答
-1

您可以使用阴影创建一个空白div并将其他元素的文本移动到它上面。您可以使用负边距或绝对位置。

于 2012-06-28T10:23:12.100 回答