2

我在侧边栏的顶部有几个按钮。第一个和最后一个按钮有一个圆角，以匹配侧边栏的边缘。当 时.active，按钮应该有一个插入框阴影。在 Chrome 中，这可以正常工作。然而，在 Firefox 中，box-shadow 不跟随边界半径，而是有一个尖角。我做错了什么，或者这是 Firefox 呈现阴影的方式中的错误？顺便说一下，这是适用于 Ubuntu 的 Firefox 41.0.1。

我无法发布屏幕截图（公司政策），但我已经提出了一个小提琴（帖子末尾的链接），您应该能够看到问题。

我已经搜索了几天，没有发现任何其他描述这种相同行为的问题。

这是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 以使按钮可点击）。

4

1 回答 1

1

这是因为display: table-cell;在您的.sidebar-nav > .menu-item {}选择器中。display: block;通过添加到您的.sidebar-nav > .active类来修复它：

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>

于 2015-10-15T17:59:16.480 回答