CSS视口单位显示问题

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

如你所见, 分隔线下方显示了1px的背景。 (顺便说一句, 这不仅发生在移动显示器中, 而且还发生在几种浏览器中。)

现在, 这是我与此部分相关的代码(以及我知道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设置标头的高度有关。即这意味着以像素为单位的结果通常不是整数, 而是932.45。现在, 我认为理论上浏览器无法将对象定位在两个像素之间, 但是如果它向上或向下舍入, 则出于某种原因, 我认为像素之间可能存在差异, 因此必须设为0对于bottom：0和实际像素, 它是标题的底部边框, 从而将子级放置在实际底部上方1px。

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

所以这不是一个实际的解决方案, 至少就我而言。在我弄清楚发生了什么以及如何真正解决它之前, 这只是一个临时解决方案。这应该非常简单：如果你通过CSS分别为视口设置元素的高度, 则子元素设置为bottom：0应该实际放置在绝对底部。但是由于某种原因它没有发生。可能这是视口单元的一个已知问题, 或者2017主题还有其他一些代码os脚本正在酝酿之中。无论如何, 我现在正在使用JS来解决此问题：

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

我证实了innerHeight实际上是检索显示的高度, 即以完整像素(整数值)作为通过vh给出的精确高度的姿势, 该高度通常为小数。

因此, 我正在将高度动态重置为该整数值, 从而避免了浏览器在显示时向上或向下取整。

我认为问题在于, 由于某种原因, 四舍五入时父母的身高和孩子的位置会分开；或在四舍五入父母身高之前设置孩子的位置。无论如何, 我很确定1px的差距与CSS中涉及非整数值有关。

#1

你可以尝试修改分隔线的bottom属性, 将其更改为-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;
}