td 元素上的圆角边框答案

【问题标题】：Rounded borders on td elementstd 元素上的圆角边框
【发布时间】：2012-10-03 15:13:12
【问题描述】：

我有一张桌子，在里面我试图通过 css3 给每个 td 元素圆角。这适用于 Firefox、Chrome、Safari，但不适用于 Opera 和 IE9。我只需要为 IE9 做这项工作，也许有人知道我做错了什么。我将给出一些代码，因为有很多。

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=1024">
</head>

<div class="timeline_page_wrapper">

<div class="wrap">
<table class="events_table">

<tr>
<th id="oct12">October</th>
<th id="nov12">November</th>
<th id="dec12">December</th>
<th id="jan13">January</th>
</tr>

<td class="event fn_milestone fn_healthcare fn_regulation fn_priority_med  priority2 ">
<a class="inline-cBox" href="#milestone_3">
<div class="content">Again, Not Very Important</div>
    <div class="lower">
<hr>
<span class="date">10.2012</span>
<span class="type">Regulation</span>
    <img src="http://policyapp.beamland.com/img/icon-medical.png" alt="" height="21px" />
</div>
</a>
</td>

还有 CSS：

td.event {
-webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius:12px;
    -o-border-radius:12px;
    border-radius: 12px;
    -webkit-box-shadow:
    0 1px 2px #fff, /*bottom external highlight*/
    1px 1px 1px #666, /*side right external shadow*/
    inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
    inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
    inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
    box-shadow:
       0 1px 2px #fff, /*bottom external highlight*/
       1px 1px 1px #666, /*side right external shadow*/
       inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
       inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
       inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
    behavior: url('../pie/PIE.htc');
   }

当我查看 IE9 的网络检查器时，它会显示正在应用的边框但不显示。任何帮助将不胜感激。

【问题讨论】：

它在我的 ie9 中工作。检查这个FIDDLE
查看image

标签： html css html-table internet-explorer-9 rounded-corners

【解决方案1】：

我将回答我自己的问题，因为我在提出问题时没有提供足够的 CSS。显然 IE 9 不喜欢你同时使用渐变和圆角。这就是我遇到的问题，但没有意识到。所以我通过使用纯色解决了这个问题，瞧，圆形边框出现了。

【讨论】：

【解决方案2】：

只需添加

border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

E9 将使用默认的border-radius，所以只要确保在所有调用边框半径的样式中都包含它。然后您的网站就可以支持 IE9。

-moz-border-radius 用于 Firefox，-webkit-border-radius 用于 Safari 和 Chrome。

另外：别忘了声明你的IE编码是ie9：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE8 没有计划。请参阅CSS Compatibility page。

【讨论】：

我希望它这么简单，但我已经尝试过了。如果您查看我提出的代码的开头，我有：所以我尝试将其更改为 content="IE =9" 但无济于事。我什至尝试输入特定的边框左上角半径而不是边框半径，但似乎没有任何效果。还有其他想法吗？
我清除了浏览器历史记录和缓存等。所以基本上你告诉我的是，对于 IE9，border-radius 应该在 td 元素上工作。对吗？