剪切的HTML超链接按钮在IE7中

时间：2013-04-11 11:30:06

标签： css html css3

我想创建一个像图片下方的div

enter image description here

这个div我做得很好，它会在所有浏览器中呈现，但问题是，当我尝试在IE7上渲染时，它将无法正常工作。
以下图片显示我的问题：
enter image description here

现在你可以看到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>

1 个答案:

答案 0 :(得分：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>

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

相关问题
最新问题