html - 为什么列数会在 4K 屏幕上的 Chrome 中呈现细线？

Question

当 Chrome 处理高分辨率屏幕上的 column-count 属性时，我发现了一个奇怪的渲染问题。我在 4K 屏幕上看到了这个。

注意顶部的细线

body {
    background-color: #30271d;
    font-family: arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    line-height: 1.2em;
    padding: 1em;
    border: solid 1px gray;
}

a {
    color: white;
    text-decoration: none;
    transition-property: color,background-color,border-color;
    transition-duration: .2s;
    transition-timing-function: linear;
}


.page-list {
    margin: 0 !important;
    display: block;
    padding:0;
    -webkit-column-count: 4;
    column-count: 4;
}

.page-list .page_item {
    padding: 0 !important;
    list-style: none;
    display: list-item;
}

.page-list .page_item a {
    padding: .25em 0 !important;
    display: block;
}

.dark-background .page-list .page_item a {
    color: #FDF9F5;
    font-weight: 400;
}

.page-list .children {
    padding-left: 1em;
    padding-bottom: .5em;
}

.page-list .page_item a:hover, .page-list .page_item a:focus {
    color: #FFEB00;
}

.page-list .current_page_item {
    opacity: .5;
}

@media screen and (max-width: 1000px) {
    .page-list {
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media screen and (max-width: 800px) {
    .page-list {
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media screen and (max-width: 480px) {
    .page-list {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

<ul class="page-list ">
<li class="page_item page-item-172 page_item_has_children"><a href="#/locations/base-rock-minerals-locations/">Base Rock Minerals Locations</a>
<ul class='children'>
	<li class="page_item page-item-173"><a href="#/locations/base-rock-minerals-locations/base-rock-minerals/">Base Rock Minerals</a></li>
	<li class="page_item page-item-174"><a href="#/locations/base-rock-minerals-locations/bonne-terre-mo/">Bonne Terre, MO</a></li>
	<li class="page_item page-item-175"><a href="#/locations/base-rock-minerals-locations/fruitland-mo/">Fruitland, MO</a></li>
</ul>
</li>
<li class="page_item page-item-169 page_item_has_children"><a href="#/locations/bmc-sand-locations/">BMC Sand Locations</a>
<ul class='children'>
	<li class="page_item page-item-170"><a href="#/locations/bmc-sand-locations/bmc-sand-llc/">BMC Sand, LLC</a></li>
	<li class="page_item page-item-171"><a href="#/locations/bmc-sand-locations/old-monroe-mo/">Old Monroe, MO</a></li>
</ul>
</li>
<li class="page_item page-item-163 page_item_has_children"><a href="#/locations/bmc-stone-locations/">BMC Stone Locations</a>
<ul class='children'>
	<li class="page_item page-item-164"><a href="#/locations/bmc-stone-locations/bmc-stone/">BMC Stone</a></li>
	<li class="page_item page-item-165"><a href="#/locations/bmc-stone-locations/defiance-mo/">Defiance, MO</a></li>
	<li class="page_item page-item-166"><a href="#/locations/bmc-stone-locations/high-hill-mo/">High Hill, MO</a></li>
	<li class="page_item page-item-167"><a href="#/locations/bmc-stone-locations/warrenton-mo/">Warrenton, MO</a></li>
	<li class="page_item page-item-168"><a href="#/locations/bmc-stone-locations/wright-city-mo/">Wright City, MO</a></li>
</ul>
</li>
<li class="page_item page-item-44"><a href="#/locations/eastern-missouri-concrete/">Eastern Missouri Concrete</a></li>
<li class="page_item page-item-141 page_item_has_children"><a href="#/locations/illinois-locations/">Illinois Locations</a>
<ul class='children'>
	<li class="page_item page-item-142"><a href="#/locations/illinois-locations/caseyville-il/">Caseyville, IL</a></li>
	<li class="page_item page-item-143"><a href="#/locations/illinois-locations/columbia-il/">Columbia, IL</a></li>
	<li class="page_item page-item-144"><a href="#/locations/illinois-locations/hamel-il/">Hamel, IL</a></li>
	<li class="page_item page-item-145"><a href="#/locations/illinois-locations/lebanon-il/">Lebanon, IL</a></li>
</ul>
</li>
<li class="page_item page-item-132 page_item_has_children"><a href="#/locations/missouri-locations/">Missouri Locations</a>
<ul class='children'>
	<li class="page_item page-item-129"><a href="#/locations/missouri-locations/arnold-mo/">Arnold, MO</a></li>
	<li class="page_item page-item-131"><a href="#/locations/missouri-locations/chesterfield-mo/">Chesterfield, MO</a></li>
	<li class="page_item page-item-133"><a href="#/locations/missouri-locations/chesterfield-mo-gumbo/">Chesterfield, MO (Gumbo)</a></li>
	<li class="page_item page-item-134"><a href="#/locations/missouri-locations/festus-mo/">Festus, MO</a></li>
	<li class="page_item page-item-135"><a href="#/locations/missouri-locations/maryland-heights-mo/">Maryland Heights, MO</a></li>
	<li class="page_item page-item-136"><a href="#/locations/missouri-locations/ofallon-mo/">O&#8217;Fallon, MO</a></li>
	<li class="page_item page-item-137"><a href="#/locations/missouri-locations/st-louis-downtown/">St. Louis Downtown</a></li>
	<li class="page_item page-item-128"><a href="#/locations/missouri-locations/webster-groves-mo/">Webster Groves, MO</a></li>
</ul>
</li>
<li class="page_item page-item-191"><a href="#/locations/ozark-building-materials/">Ozark Building Materials</a></li>
<li class="page_item page-item-146 page_item_has_children"><a href="#/locations/politte-locations/">Politte Locations</a>
<ul class='children'>
	<li class="page_item page-item-148"><a href="#/locations/politte-locations/arcadia-mo/">Arcadia, MO</a></li>
	<li class="page_item page-item-156"><a href="#/locations/politte-locations/bonne-terre-mo/">Bonne Terre, MO</a></li>
	<li class="page_item page-item-157"><a href="#/locations/politte-locations/ellington-mo/">Ellington, MO</a></li>
	<li class="page_item page-item-158"><a href="#/locations/politte-locations/ellsinore-mo/">Ellsinore, MO</a></li>
	<li class="page_item page-item-159"><a href="#/locations/politte-locations/farmington-mo/">Farmington, MO</a></li>
	<li class="page_item page-item-147"><a href="#/locations/politte-locations/politte-llc/">Politte LLC</a></li>
	<li class="page_item page-item-160"><a href="#/locations/politte-locations/potosi-mo/">Potosi, MO</a></li>
	<li class="page_item page-item-161"><a href="#/locations/politte-locations/van-buren-mo/">Van Buren, MO</a></li>
	<li class="page_item page-item-162"><a href="#/locations/politte-locations/viburnum-mo/">Viburnum, MO</a></li>
</ul>
</li>
<li class="page_item page-item-149 page_item_has_children"><a href="#/locations/rmc-locations/">RMC Locations</a>
<ul class='children'>
	<li class="page_item page-item-151"><a href="#/locations/rmc-locations/fredericktown-mo/">Fredericktown, MO</a></li>
	<li class="page_item page-item-153"><a href="#/locations/rmc-locations/perryville-mo/">Perryville, MO</a></li>
	<li class="page_item page-item-150"><a href="#/locations/rmc-locations/rmc-llc/">RMC, LLC</a></li>
	<li class="page_item page-item-154"><a href="#/locations/rmc-locations/ste-genevieve-mo/">STE Genevieve, MO</a></li>
</ul>
</li>
<li class="page_item page-item-138 page_item_has_children current_page_ancestor current_page_parent"><a href="#/locations/rolla-locations/">Rolla Locations</a>
<ul class='children'>
	<li class="page_item page-item-139 current_page_item"><a href="#/locations/rolla-locations/rolla-mo/">Rolla, MO</a></li>
	<li class="page_item page-item-140"><a href="#/locations/rolla-locations/salem-mo/">Salem, MO</a></li>
</ul>
</li>

</ul>

因此，当您将鼠标悬停在链接上时，有时会看到非常细的白/灰线出现在和周围<a>，具体取决于您悬停的内容。有时线条会持续存在，有时一旦您将光标移动到其他位置，它们就会消失。这些线条是像素细的，我的意思是它们小于网络 1px 单位，它们在 4K 显示器上是一个像素。这些很薄，很容易错过！我建议将鼠标悬停在最后一列中的链接上，因为这是我最常看到它们的地方。<li><ul>

更奇怪的是，浏览器窗口的大小似乎会影响它是否出现和强度。我有两个低分辨率显示器作为连接到我的主屏幕的额外显示器，它也会出现在它们身上，但是当尝试在一个非高分辨率显示器上重新创建问题时，我看不到线条出现。

我使用的是 Chrome 版本 68，但我也在旧版本中看到过它。

关于正在发生的事情有什么想法吗？

html - 为什么列数会在 4K 屏幕上的 Chrome 中呈现细线？

0 回答 0

Related

Reference