IE8的弧形邊框CSS

我需要IE8和所有主流瀏覽器的弧形邊框CSS。目前我正在嘗試使用CSS PIE IE8的弧形邊框CSS

jsfiddle演示是here。但我會建議回答者從here下載PIE.htc文件，並嘗試將HTML作爲獨立頁面在IE8中獲得真正的效果。

我的問題是<td>包含「感謝您註冊」文本是不是彎曲在jsfiddle中的IE8。如果我將它作爲HTML頁面運行，它在IE8中彎曲，但藍色背景與「謝謝註冊」<td>（但其背景爲「＃f2f2f2」）重疊。

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;"> 
     <tr> 
      <td>&nbsp;</td> 
      <td style="width: 60%; text-align: center;background: #0067C8;"> 
       <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
        <tr> 
         <td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;"> 
          <img src="twitter_logo.png" width="200" height="50" alt"Twitter" /> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3" style="height: 25px;">&nbsp;</td> 
        </tr> 
        <tr> 
         <td style="width:3%;">&nbsp;</td> 
         <td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);"> 
          Thank you for registering 
         </td> 
         <td style="width:3%;">&nbsp;</td> 
        </tr> 
        <tr> 
         <td colspan="3" style="height: 25px;">&nbsp;</td> 
        </tr> 
       </table> 
      </td> 
      <td>&nbsp;</td> 
     </tr> 
    </table>

來源

2012-04-10 tusar

我認爲它是因爲用z-index問題爲主。

點擊此處查看更多詳情。 general issues encountered when using PIE

來源

2012-04-10 07:30:52 Exor

你搖滾@Exor！找到了！ '位置：相對; z-index：0;'在外部（有背景顏色）做了訣竅！ – tusar 2012-04-10 07:42:17

你有沒有試過，http://jquery.malsup.com/corner/ jquery插件添加曲線？

$(function() { 
    $('table table tr:eq(2) td:eq(1)').corner(); 
});

演示：http://jsfiddle.net/bDvRd/4/

來源

2012-04-10 07:17:24 codef0rmer

添加

position:relative; z-index: 0;

，它是一個電子郵件模板實際。但是+1，因爲你是正確的。我需要一個基於CSS的解決方案。你可以試一次嗎？ – tusar 2012-04-10 07:20:19

不幸的是，沒有可用於所有主流瀏覽器的CSS解決方案。如果說用JS解決方案或者不認爲這種瀏覽器不支持角落，那將是非常棘手的。 – codef0rmer 2012-04-10 11:47:43

儘量我不使用jQuery與獨立的頁面由Using CSS3Pie htc for border-radius in IE8

OR CSS3 PIE - Giving IE border-radius support not working?

來源

2012-04-10 07:44:37 kubedan

+1是正確的！但我已經接受了類似的答案:) – tusar 2012-04-10 07:46:15

IE8的弧形邊框CSS

回答

相關問題