0

下の画像のようなdivを作りたい

ここに画像の説明を入力

このdivは非常にうまく機能し、すべてのブラウザーでレンダリングされますが、IE7でレンダリングしようとするとうまく機能しないという問題があります。
次の画像は私の問題を示しています：
ここに画像の説明を入力

ボタンが IE7 でクリップされていることがわかります。See Moreシャドウを削除すると、非常にうまくレンダリングされますが、下の 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 に答える