html - 当单元格不透明度低于 1 时，单元格边框采用单元格背景颜色，Chrome 工作正常

Question

我通过为单元格提供与容器背景颜色相同的边框和背景为 rgba(255,255,255,.4) 的单元格，使该表格看起来像单元格没有边框； .我使用了 Bootstrap 3 但没有将特定于引导表的类添加到我的标记中。

当我“禁用”某些单元格并将它们的不透明度更改为 0.5 时，我意识到边框采用了背景颜色，而不是保留它们的纯蓝色。就像边框从 2px solid #38cee9 变成了 2px solid transparent。 这发生在 IE 和 Firefox 上。 Chrome 工作正常!为什么？

这是我的标记:

<div class="layout-section ng-scope">
<div class="layout-control-container">
    <table class="layout-table">
        <tbody>
            <tr ng-repeat="row in section.rows" class="ng-scope">
                <td ng-repeat="cell in row.cells" width="50%" colspan="1"></td>
                <td ng-repeat="cell in row.cells" width="50%" colspan="1"></td>
            </tr>
            <tr ng-repeat="row in section.rows" class="ng-scope">
                <td ng-repeat="cell in row.cells" width="50%" colspan="1" class="opac5"></td>
                <td ng-repeat="cell in row.cells" width="50%" colspan="1"></td>
            </tr>
            <tr ng-repeat="row in section.rows" class="ng-scope">
                <td ng-repeat="cell in row.cells" width="50%" colspan="1" class="opac5"></td>
                <td ng-repeat="cell in row.cells" width="50%" colspan="1" class="opac5"></td>
            </tr>
            <tr ng-repeat="row in section.rows" class="ng-scope">
                <td ng-repeat="cell in row.cells" width="50%" colspan="1"></td>
                <td ng-repeat="cell in row.cells" width="50%" colspan="1"></td>
            </tr>
        </tbody>
    </table>
</div>

这是样式:

.layout-section 
{
    width: auto;
    height: auto;
    min-height: 100px;
    padding: 10px;
    background-color: rgb(56, 206, 233);
    position: relative;
    margin-bottom: 20px;
}
table.layout-table 
{
    display: table;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
table.layout-table tr td 
{
    padding: 10px;
    height: 85px;
    vertical-align: middle;
    border: 5px solid rgb(56, 206, 233);
    background-color: rgb(139, 226, 242);
    background-color: rgba(255, 255, 255, 0.4);
}
.opac5 
{
    opacity:0.5;
}

我添加了一个 jsfiddle 在不同的浏览器中查看和测试它。我需要使它在所有浏览器(包括 IE9+)中正常工作，就像在 Chrome 中一样。

如何在将整个单元格的不透明度降低到 0.5 的同时保持边框为蓝色？

Answer 1

对于 future ，请考虑这篇文章:http://css-tricks.com/transparent-borders-with-background-clip/

这段代码:

#yourElement {
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

应该使边界留在框外。这是您更新的 fiddle :http://jsfiddle.net/PZ58s/16/