CSS 视口单元的显示问题

Question

我正在开发 WP 的 Twentyseventeen 的子主题，它使用 VH 来调整某些高度，例如标题部分。在标题中，我真正想要更改的是添加一种倾斜的分隔线，使其更“时尚”，但无论我做什么，我都会在某些显示中遇到以下问题：

如您所见，1px 的背景显示在分隔线下方。 （顺便说一句，这不仅发生在移动显示中，而且发生在多个浏览器中。）

现在，这是 my 与此部分相关的代码（以及 2017 年的代码，我知道 2017 年与此部分有关；但我不能确定主题没有某些影响此行为的代码或脚本）：

HTML：

<div class="custom-header">

    <div class="custom-header-media">
        <?php the_custom_header_markup(); ?>
    </div>

    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

    <div class="custom-header-bottom-divider">
        <svg id="divider-bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100 L100 0 L100 100 Z"></path></svg>
    </div>

</div><!-- .custom-header -->

CSS：

.custom-header {
    position: relative;
    overflow: hidden;
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 75vh;
    width: 100%;
}

.custom-header-media {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.custom-header-media:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
    position: fixed;
    height: auto;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
    width: auto;
    top: 50%;
    padding-bottom: 1px; /* Prevent header from extending beyond the footer */
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.custom-header-bottom-divider {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    min-width: 1000px;
    text-align: center;
    line-height: 1;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 2;
}

.custom-header-bottom-divider svg {
    display: block;
    fill: #fff;
}

我 99% 确定这与 2017 年使用 VH 来确定页眉高度的事实有关。 IE。这意味着通常以像素为单位的结果不是整数，而是像 932.45 这样的数字。现在，我在想，理论上浏览器不能在两个像素之间放置一个对象，但是如果它向上或向下舍入，那么我认为由于某种原因，像素之间可能存在差异，它需要为 0对于bottom: 0 和作为标题底部边框的实际像素，从而将子元素定位在实际底部上方 1px 处。

临时解决方案/解决方法：

所以这不是一个实际的解决方案，至少就我而言不是。在我弄清楚发生了什么以及如何真正解决它之前，这只是一个临时修复。这应该很简单：如果您通过 CSS 设置元素的高度，则设置为 bottom: 0 的子元素实际上应该放置在绝对底部。但由于某种原因，它没有发生。也许这是视口单元的一个已知问题，或者 2017 主题可能有一些其他的代码操作系统脚本正在搞砸。无论如何，我现在正在使用 JS 来解决这个问题：

var headerHeight = $customHeader.innerHeight(); 
$customHeader.animate({height: headerHeight});

我证实innerHeight 实际上检索了显示的高度，即以全像素（整数值）为单位，作为通过vh 给出的精确高度的姿势，它往往有小数。

所以我动态地将高度重置为该整数值，从而避免浏览器在显示时向上或向下舍入。

我认为问题在于，由于某种原因，四舍五入时父母的身高和孩子的位置被分开了；或者在父母的身高四舍五入之前设置孩子的位置。无论如何，我很确定 1px 的差距与 CSS 中包含非整数值这一事实有关。

Answer 1

您可以尝试修改分隔线的底部属性，将其更改为 -1px

.custom-header-bottom-divider {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 100%;
    min-width: 1000px;
    text-align: center;
    line-height: 1;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 2;
}