【问题标题】:Chrome border radius and background colorChrome边框半径和背景颜色
【发布时间】:2013-11-18 00:24:56
【问题描述】:

类似于Chrome border color issue 问题。这是小提琴: http://jsfiddle.net/gU52K/

我想要具有特定背景(白色)和圆形边框的表格。在 chrome 中,只有边框可以正常工作,带颜色的边框 - 不起作用。

Firefox/IE 输出:1,2 和 4 表格带有圆角边框,3 表格带有角边框。

Chrome 输出(最新,版本 32.0.1700.14 beta-m Aura):1 个带有圆形边框的表格,2 个和 4 个完全没有边框的表格,3 个带有角形边框的表格。

FF 输出是预期的行为,问题出在哪里?

HTML:

<table class="List">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG Col">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG Sep">
    <tr><td>One</td><td>Two</td></tr>
</table>

CSS:

.List {
    border: 1px solid #000;
    border-radius: 10px;
}
.List.BG {
    background-color: white;
    /* border-collapse: separate; is default */
}
.List.BG.Col {
    border-collapse: collapse;
}
.List.BG.Sep {
    border-collapse: separate;
}

【问题讨论】:

    标签: html css google-chrome


    【解决方案1】:

    改变

    .List.BG.Col {
        border-collapse: collapse;
    }
    

    .List.BG.Col {
        border-collapse: separate;
    }
    

    【讨论】:

    • 这正是 .List.BG.Sep 所展示的:'collapse' 使边界在 FF 和 Chrome 中都被逼入绝境,但 FF 中的 'separate'(我认为是默认设置)具有圆形边框(如预期)并且在 chrome 中边框消失了。 this is what i see in chrome