CSS视口单位显示问题 _WordPress开发

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

文章图片
【CSS视口单位显示问题】如你所见, 分隔线下方显示了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; }