0

我想创建一个如下图所示的 div

在此处输入图像描述

这个 div 我做得很好，它会在所有浏览器中呈现，但问题是当我尝试在 IE7 上呈现时，它不能正常工作。
下图显示了我的问题：
在此处输入图像描述

现在您可以看到See More按钮在 IE7 中被剪裁，当我移除阴影时，它会呈现得非常好，但我需要
下面 div 的阴影是我的 CSS 代码：

<style type="text/css">
        #ShadowSection
        {
            float: right;
            width: 250px;
            display: inline-block;
            background-color: green;
            margin-top: 30px;
            position: relative;
            max-height: 420px;
        }
        .ShadowSection-Heading
        {
            font-family: Caecilia LT Std;
            font-size: 24px;
            color: white;
            font-weight:bolder;
        }
        #btnSeeMoreContainer
        {
            width: 100%;
            height: 40px;
            position: absolute;
            z-index: 250;
            top: 320px;
            right: 0px;
            text-align: center;
        }
        #btnSeeMoreStockProd
        {
            background-position: center;
            width: 127px;
            height: 40px;
            text-align: center;
            display: block;
            text-decoration: none;
            background-color: Red;
            background-position: center center;
        }
        .btnSeeMoreText
        {
            font-family: TradeGothic;
            font-style: oblique;
            text-transform: uppercase;
            color: #ffffff;
            font-size: 15px;
            height: 40px;
            line-height: 40px;
        }
        .shadow
        {
            -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.4);
            -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.4);
            box-shadow: 3px 3px 4px rgba(0,0,0,0.4); /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=rgba(0,0,0,0.4))"; /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=rgba(0,0,0,0.4));
        }
    </style>

下面是我的 HTML 代码：

<body style="text-align: center;">
    <div id="ShadowSection" class="shadow">
        <div style="margin: 10px 20px 30px 20px; min-height: 300px; word-wrap: break-word;
            word-break: break-all;">
            <p>
                <span class="ShadowSection-Heading" title="Demo1">Demo1</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo2">Demo2</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo3">Demo3</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo4">Demo4</span>
                <br />
            </p>
        </div>
        <table id="btnSeeMoreContainer" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center">
                    <a href="#" id="btnSeeMoreStockProd" title="See More"><span class="btnSeeMoreText">
                        See More</span> </a>
                </td>
            </tr>
        </table>
</body>
4

1 回答 1

0

IE7 可能会很痛苦。它甚至不容易测试问题。

看起来您没有此部分的结束 div：

<div id="ShadowSection" class="shadow">

所以应该是：

<body style="text-align: center;">
    <div id="ShadowSection" class="shadow">
        <div style="margin: 10px 20px 30px 20px; min-height: 300px; word-wrap: break-word;
            word-break: break-all;">
            <p>
                <span class="ShadowSection-Heading" title="Demo1">Demo1</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo2">Demo2</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo3">Demo3</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo4">Demo4</span>
                <br />
            </p>
        </div>
        <table id="btnSeeMoreContainer" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center">
                    <a href="#" id="btnSeeMoreStockProd" title="See More"><span class="btnSeeMoreText">
                        See More</span> </a>
                </td>
            </tr>
        </table>
</div>
</body>

我已经更新了你的代码，请试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

        #ShadowSection
        {
            width: 250px;
            display: inline-block;
            background-color: green;
            margin-top: 30px;
            position: relative;
            max-height: 420px;
        }
        .ShadowSection-Heading
        {
            font-family: Caecilia LT Std;
            font-size: 24px;
            color: white;
            font-weight:bolder;
        }
        #btnSeeMoreContainer
        {
            width: 127px;
            height: 40px;
            position: absolute;
            z-index: 250;
            bottom: -20px;
            left:60px;
            text-align: center;
        }
        #btnSeeMoreStockProd
        {
            width: 127px;
            height: 40px;
            text-align: center;
            display: block;
            text-decoration: none;
            background-color: Red;
        }
        .btnSeeMoreText
        {
            font-family: TradeGothic;
            font-style: oblique;
            text-transform: uppercase;
            color: #ffffff;
            font-size: 15px;
            height: 40px;
            line-height: 40px;
        }
        .shadow
        {
            -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.4);
            -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.4);
            box-shadow: 3px 3px 4px rgba(0,0,0,0.4); /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=rgba(0,0,0,0.4))"; /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=rgba(0,0,0,0.4));
        }
        </style>
    </head>
    <body>
        <div id="ShadowSection" class="shadow">
        <div style="margin: 10px 20px 30px 20px; min-height: 300px; word-wrap: break-word; word-break: break-all;">
            <p>
                <span class="ShadowSection-Heading" title="Demo1">Demo1</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo2">Demo2</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo3">Demo3</span>
                <br />
                <br />
                <br />
                <span class="ShadowSection-Heading" title="Demo4">Demo4</span>
                <br />
            </p>
        </div>
        <div id="btnSeeMoreContainer">

                    <a href="#" id="btnSeeMoreStockProd" title="See More"><span class="btnSeeMoreText">
                        See More</span> </a>
         </div>               
        </div>
    </body>
</html>

我不认为它喜欢你放的桌子。

于 2013-04-11T11:47:58.800 回答