Question

我有以下css类对于IE7

    .shadow
            {

                margin-left: -5px;
                margin-top: -5px;
                zoom: 1;
           filter:progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
             progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
            }

这有效，可以在IE中生成漂亮的阴影。但我想要鼠标悬停事件的这种效果。所以改变css类

.shadow
        {
            width:100%;
        }
        .shadow:hover
        {

            margin-left: -5px;
            margin-top: -5px;
            zoom: 1;
       filter:progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
        }

这不起作用。为什么？？上面的CSS类有什么问题？

我的HTML：

<html>
<head>
    <style>
        .shadow
        {

            width:100%;
        }
        .shadow:hover
        {
            margin-left: -5px;
   margin-top: -5px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=20, Direction=270)
        }
    </style>
</head>
<body>
    <div class="shadow" style="height:100px;width:100px">
        <h1>Swaminarayan</h1>
    </div>

</body>
</html>

Answer 1

您必须指定DOCTYPE以使其在IE7中工作，因为它使用与其他浏览器不同的默认DOCTYPE。详细了解Quirksmode。

只需添加HTML5 DOCTYPE

<!DOCTYPE html>

到文档的最顶层就足够了，并且会在每个浏览器中触发标准模式，包括IE6。

您还可以使用较早的DOCTYPE，例如HTML4 Strict：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在看到阴影效果之前，我还必须使用Internet Explorer信息栏允许一些被阻止的内容。

鼠标上的box-shadow Over HTML中的问题

1 个答案: