CSS视口单位的显示问题

我正在研究WP的Twenty17的一个儿童主题，它使用VH来调整某些高度，比如页眉部分。在标题中，我真正想更改的是添加一种倾斜分隔符，使其更“时尚”，但无论我做什么，我在某些显示中都会遇到以下问题：

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

现在，这里是我关于这一部分的代码（以及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 -->

.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。现在，我认为理论上浏览器不能在两个像素之间定位一个对象，但是如果它向上或向下取整，那么出于某种原因，我认为

bottom:0

的像素为0与作为标题下边框的实际像素之间可能存在差异，从而将儿童1px定位在实际底部上方

临时解决方案/解决方案： 所以这不是一个实际的解决方案，至少在我看来不是。这只是一个临时解决方案，直到我能弄清楚到底发生了什么以及如何真正解决它。这应该非常简单：如果您通过CSS分别为视口设置元素的高度，那么设置为

bottom:0

的子元素实际上应该放置在绝对底部。但这不是出于某种原因。也许这是视口单元的一个已知问题，或者2017主题还有其他一些代码操作系统脚本。无论如何，我现在使用JS来管理这个问题：

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

我证实，

innerHeight

实际检索显示的高度，即整像素整数值-，作为通过

vh

给出的精确高度的姿势，该姿势倾向于使用小数

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

---

我认为问题在于，出于某种原因，父母的身高和孩子的位置在取整时被分开；或者在父对象的高度被舍入之前设置子对象的位置。无论如何，我很确定1px间隔与CSS中涉及非整数值这一事实有关。

您可以尝试修改分隔符的底部属性，将其更改为-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;
}

---

您可以尝试修改分隔符的底部属性，将其更改为-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;
}

---

四舍五入肯定会导致这种情况。

有标题视频。自定义标题媒体/iframe/img

有

填充底部：0

？感谢您的回复@chriskirknielsen！不幸的是，没有变化。四舍五入肯定会导致这种情况。

有标题视频。自定义标题媒体/iframe/img

有

填充底部：0

？感谢您的回复@chriskirknielsen！很遗憾，没有变化。谢谢您的回复，@Levi！我曾经想过这个问题，但我希望找到一种解决方法，而不必重复使用解决方法。不可否认，1px没有那么多；也许是我的强迫症，但知道我的分频器溢出1px让我很烦！另外，当我尝试这样做时，它只在某些情况下解决了问题；在其他人身上，仍然有线条，更模糊，但它仍然存在。好像有一个边界被应用在某个地方。但是没有。（即使降到-2、-3、-5等等，也无法修复它。如果能看到一个工作URL，这样我就可以访问developer toolsHi@Levi，那就太好了。恐怕我不能发布一个工作URL，因为这个项目是为一部正在预制作的doc电影准备的，而且混合中有你的标准NDA！☺️谢谢你的回答，@Levi！我已经想到了这个问题，但我希望找到一种解决方法，而不必重复解决。1px不太可能；也许是我的强迫症，但知道我的分频器溢出1px让我很烦！另外，当我试着这样做时，它只在某些情况下解决了问题；在其他情况下，仍然有线，更微弱但它仍然存在。好像有一个边界在某处被应用。但是没有。（即使降到-2、-3、-5等等，也无法修复它。如果能看到一个工作URL，这样我就可以访问developer toolsHi@Levi，那就太好了。恐怕我不能发布一个工作URL，因为这个项目是为一部正在预制作的doc电影准备的，而且混合中有你的标准NDA！☺️