Firefox 无法正确显示带边框半径的嵌入框阴影

Question

我在边栏的顶部有几个按钮。第一个和最后一个按钮有一个圆角以匹配侧边栏的边缘。当 .active 时，按钮应该有一个内嵌框阴影。在 Chrome 中，这可以正常工作。然而，在 Firefox 中，box-shadow 不遵循 border-radius 而是有一个尖角。我做错了什么，或者这是 Firefox 渲染阴影方式的错误？顺便说一下，这是 Ubuntu 的 Firefox 41.0.1。

我无法 post 截图（公司政策），但我已经在你应该去的地方放了一个 fiddle（link 在 post 末尾）能够看到问题。

我已经搜索了几天，但没有找到任何其他描述相同行为的问题。

这是 HTML：

<div class="sidebar">
<div class="sidebar-nav"> 
    <a class="menu-item active" href="#" onclick='toggleNav(this)'>
      My Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Your Page
    </a>
    <a class="menu-item" href="#" onclick='toggleNav(this)'>
      Our Page
    </a>
</div>
<div class="sidebar-main">
    <div class="sidebar-row">
        <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>
    <div class="sidebar-row">
        <div class="sidebar-h1">User Settings</div>
        <label>
            <input type="checkbox" />Settings</label>
        <br>
        <select>
            <option>Words</option>
            <option>Things</option>
            <option>Stuff</option>
        </select>
    </div>
</div>
</div>

和CSS：

.sidebar {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    background: #eee;
    width: 250px;
    height: 100%;
}
.sidebar-nav {
    padding: 0px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}
.sidebar-nav > .menu-item {
    color: #888;
    padding: 10px;
    vertical-align: top;
    display: table-cell;
    cursor: pointer;
    text-decoration: none;
}
.sidebar-nav > .menu-item:first-child {
    border-radius: 8px 0 0 0;
}
.sidebar-nav > .menu-item:last-child {
    border-radius: 0 8px 0 0;
}
.sidebar-nav .menu-item + .menu-item {
    border-left: 1px solid #ccc;
}
.sidebar-nav > .menu-item:not(.active):hover {
    background-color: #ddd;
}
.sidebar-nav > .active {
    color: white;
    box-shadow: inset 0px -2px 4px 2px #888;
    background-color: #aaa;
}


.sidebar-main {
    padding: 10px;
}

.sidebar-h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.sidebar-row {
    padding: 15px;
    position: relative;
}

.sidebar-row:after {
    content:'';
    width: 50%;
    height: 1px;
    background: #ddd;
    position: absolute;
    left: 25%;
    bottom: -1px;
}

和 JSFiddle（请注意 fiddle 还包含一些 jQuery 以使按钮可点击）。

Answer 1

这是因为 .sidebar-nav > .menu-item {} 选择器中的 display: table-cell;。通过将 display: block; 添加到 .sidebar-nav > .active class:

来修复它

function toggleNav(elem) {
  $('a').removeClass('active');
    $(elem).addClass('active');
}

.sidebar {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    background: #eee;
    width: 250px;
    height: 100%;
}
.sidebar-nav {
    padding: 0px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}
.sidebar-nav > .menu-item {
    color: #888;
    padding: 10px;
    vertical-align: top;
    display: table-cell;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
.sidebar-nav > .menu-item:first-child {
    border-radius: 8px 0 0 0;
}
.sidebar-nav > .menu-item:last-child {
    border-radius: 0 8px 0 0;
}
.sidebar-nav .menu-item + .menu-item {
    border-left: 1px solid #ccc;
}
.sidebar-nav > .menu-item:not(.active):hover {
    background-color: #ddd;
}
.sidebar-nav > .active {
    color: white;
    box-shadow: inset 0px -2px 4px 2px #888;
    background-color: #aaa;
    display: block;
}


.sidebar-main {
    padding: 10px;
}

.sidebar-h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}

.sidebar-row {
    padding: 15px;
    position: relative;
}

.sidebar-row:after {
    content:'';
    width: 50%;
    height: 1px;
    background: #ddd;
    position: absolute;
    left: 25%;
    bottom: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sidebar">
    <div class="sidebar-nav"> 
        <a class="menu-item active" href="#" onclick='toggleNav(this)'>
          My Page
        </a>
        <a class="menu-item" href="#" onclick='toggleNav(this)'>
          Your Page
        </a>
        <a class="menu-item" href="#" onclick='toggleNav(this)'>
          Our Page
        </a>
    </div>
    <div class="sidebar-main">
        <div class="sidebar-row">
            <div class="sidebar-h1">User Info</div>Phasellus blandit nulla ante, non tempus sem imperdiet sagittis. Vivamus condimentum et est eu iaculis. Nam semper nunc quis rhoncus viverra. Nam lorem nulla, feugiat at sodales sit amet, tempor quis nisi. Sed dictum in tortor et dapibus. Aliquam erat volutpat. Vivamus venenatis faucibus justo vitae rutrum. Sed in viverra ipsum. Duis et metus at metus euismod fermentum sed eu dolor.</div>
        <div class="sidebar-row">
            <div class="sidebar-h1">User Settings</div>
            <label>
                <input type="checkbox" />Settings</label>
            <br>
            <select>
                <option>Words</option>
                <option>Things</option>
                <option>Stuff</option>
            </select>
        </div>
    </div>
</div>

Firefox 无法正确显示带边框半径的嵌入框阴影

Firefox not properly displaying inset box-shadow with border-radius

html

css

firefox

box-shadow