削波HTML超鏈接按鈕，在IE7

enter image description here

一個div和這個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>

來源

2013-04-11 Pravesh Singh

IE7？真？ :) – 2013-04-11 11:36:57

是啊@MiljanPuzović – 2013-04-11 11:41:16

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-11 11:47:58 Andrew

我這樣做，但它仍然無法正常工作。 @Andrew – 2013-04-11 11:52:20

嗯IE7從來沒有樂趣。它一次試圖修復一件小事。對我來說它在IE7中工作正常，但在其他版本的IE中看起來很奇怪 – Andrew 2013-04-11 12:07:36

我更新了我的代碼，請參閱上文。它適用於每個版本的IE，我有 – Andrew 2013-04-11 12:20:01

削波HTML超鏈接按鈕，在IE7

回答

相關問題