Question

我在侧边栏的顶部有几个按钮。第一个和最后一个按钮有一个圆角，以匹配侧边栏的边缘。当.active时，按钮应该有一个插入框阴影。在Chrome中，这可以正常使用。但是，在Firefox中，框阴影不会跟随边界半径而是有一个尖角。我做错了什么，或者这是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（请注意，小提琴还包含一个小jQuery，可以使按钮可点击）。

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Firefox没有正确显示带有border-radius的插入框阴影

1 个答案: