#sidebar {
width: 160px;
z-index: 1000;
background: #ed1b2e;
position: absolute;
top: 57px;
left: 0;
}
#sidebar .inner {
border-bottom: 1px solid #f35765;
padding: 0px 0;
}
#sidebar .list {
padding: 20px 0 15px;
}
#sidebar .list li {
padding: 4px 0;
}
#sidebar .list a {
display: block;
padding: 0 10px 0 20px;
color: #ffffff;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar .list a:hover {
color: #ffffff;
color: rgba(255, 255, 255, 0.9);
}
#sidebar .list a.active {
background: #000810;
position: relative;
}
#sidebar .list a.active:hover {
background-color: #000810;
background-color: rgba(0, 8, 16, 0.9);
}
#sidebar .list a.active:after {
content: "";
position: absolute;
pointer-events: none;
display: block;
top: 0;
right: -30px;
height: 0;
width: 0;
border: solid transparent;
border-color: transparent;
border-left-color: #000810;
border-width: 15px;
}
<div id="sidebar" style="min-height: 1586px;">
<div class="sidebar-wrap">
<div class="sidebar-content">
<div class="inner">
<ul id="MAIN_TAB_2000_SUBMENU_TOP" class="list" style="">
<li>
<a id="2020" href="/service/main.do" class="active">Home</a>
</li>
<li>
<a id="2022" href="/service/sales/documents/issues.do">Document issues</a>
</li>
</ul>
</div>
</div>
<!-- //sidebar-content -->
</div>
<!-- //sidebar-wrap -->
</div>
如果 Chrome 中的用户将缩放更改为例如 90%,则黑色箭头将分成两部分。我希望黑色箭头在 100% 时总是看起来像。我希望黑色箭头在 100% 时总是看起来像。有什么建议么? jsfiddle
最佳答案
您可以通过使用 left: 100%;
而不是 right: -30px;
定位箭头来避免此问题。
- 从
#sidebar .list a.active:after
中移除right: -30px;
- 将
left: 100%;
添加到#sidebar .list a.active:after
对于发生这种情况的原因,我最好的猜测是这可能是由于浏览器舍入像素值的方式所致。
#sidebar {
width: 160px;
z-index: 1000;
background: #ed1b2e;
position: absolute;
top: 57px;
left: 0;
}
#sidebar .inner {
border-bottom: 1px solid #f35765;
padding: 0px 0;
}
#sidebar .inner.inner-top {
padding-top: 40px;
}
#sidebar .inner.no-border {
border-bottom: none;
}
#sidebar .selector-holder {
padding: 25px 18px 28px 18px;
}
#sidebar .selector {
position: relative;
z-index: 1;
}
#sidebar .selector .toggler {
display: block;
outline: 0;
height: 28px;
background: #cc1626;
padding: 0 25px 0 10px;
overflow: hidden;
position: relative;
color: #ffffff;
font-size: 12px;
line-height: 28px;
}
#sidebar .selector .toggler span {
display: block;
white-space: nowrap;
overflow: hidden;
}
#sidebar .selector .toggler:after {
top: 50%;
right: 8px;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
margin-top: -2px;
border: solid transparent;
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 6px;
margin-left: -6px;
}
#sidebar .selector .toggler.hidden:after {
display: none;
}
#sidebar .selector ul {
padding: 3px 0;
}
#sidebar .selector ul li {
padding: 2px 0;
}
#sidebar .selector ul a {
display: block;
padding: 5px 10px;
white-space: nowrap;
color: #ffffff;
outline: 0;
font-size: 12px;
}
#sidebar .selector ul a:hover,
#sidebar .selector ul a.active {
background: #9c9c9c;
}
#sidebar .js-dropdown-content {
min-width: 100%;
background: #808080;
}
#sidebar .list {
padding: 20px 0 15px;
}
#sidebar .list li {
padding: 4px 0;
}
#sidebar .list a {
display: block;
padding: 0 10px 0 20px;
color: #ffffff;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar .list a:hover {
color: #ffffff;
color: rgba(255, 255, 255, 0.9);
}
#sidebar .list a.active {
background: #000810;
position: relative;
}
#sidebar .list a.active:hover {
background-color: #000810;
background-color: rgba(0, 8, 16, 0.9);
}
#sidebar .list a.active:after {
content: "";
position: absolute;
pointer-events: none;
display: block;
top: 0;
left: 100%;
height: 0;
width: 0;
border: solid transparent;
border-color: transparent;
border-left-color: #000810;
border-width: 15px;
}
<div id="sidebar" style="min-height: 1586px;">
<div class="sidebar-wrap">
<div class="sidebar-content">
<div class="inner">
<ul id="MAIN_TAB_2000_SUBMENU_TOP" class="list" style="">
<li>
<a id="2020" href="/service/main.do" class="active">Home</a>
</li>
<li>
<a id="2022" href="/service/sales/documents/issues.do">Document issues</a>
</li>
</ul>
</div>
</div>
<!-- //sidebar-content -->
</div>
<!-- //sidebar-wrap -->
</div>
关于html - 不同缩放级别的元素之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32141351/