在所有浏览器中，缩小/缩小时边框消失

Question

我正在使用不同的浏览器进行一个项目。

我有一个带边框的表格，当我缩小页面边框时，它就会消失。

这种情况在所有浏览器中都会发生，如IE、EDGE和Chrome浏览器。

是DOM结构问题吗？

它需要支持75%到125%的缩放级别。具体来说，在Chrome中将缩放设置为67%，并查看更改

请提供这个问题的可能解决方案。

.mEditor {
display: flex;
border-bottom: 1px solid #d7d7d7;
}
.m-label {
width: 30%;
display: flex;
background-color: #f2f2f2;
}
.m-editor-noc {
flex: 1;
display: flex;
background-color: #FFFFFF;
border-left: 1px solid #d7d7d7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mfEditor {
display: flex;
flex: 1 0 auto;
}
.mEditor-li {
vertical-align: middle;
border-left: 1px solid #d7d7d7;
height: 18px;
display: inline-block;
margin-top: 3px;
}
.mEditor .tEditor {
border: none;
flex: 1;
padding-right: 6px;
}

<div class="m-group">
<div id="id251" class="mEditor">
<div class="m-label">
<label for="id223" title="Address">Address</label>
</div>
<div class="m-editor-noc">
<div id="id252" class="mfEditor">
<input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id254" class="mEditor">
<div class="m-label">
<label for="id224" title="Address 2">Address 2</label>
</div>
<div class="m-editor-noc">
<div id="id255" class="mfEditor">
<input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id257" class="mEditor">
<div class="m-label">
<label for="id225" title="Postcode">Postcode</label>
</div>
<div class="m-editor-noc">
<div id="id258" class="mfEditor">
<input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id25a" class="mEditor ">
<div class="m-label">
<label for="id20f" title="City">City</label>
</div>
<div class="m-editor-noc">
<div id="id25b" class="mfEditor">
<input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
<div id="id25d" class="mEditor">
<div class="m-label">
<label for="id228" title="District">District</label>
</div>
<div class="m-editor-noc">
<div id="id25e" class="mfEditor">
<input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id260" class="mEditor ">
<div class="m-label">
<label for="id210" title="Country">Country</label>
</div>
<div class="m-editor-noc">
<div id="id261" class="mfEditor">
<input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
</div>

Answer 1

如果"我们支持所有浏览器和缩放级别75%-125%">的意思是，无论缩放级别如何，你都希望边框的实际像素大小相同，那你就倒霉了。这在技术上是不可能的。

您应该只为100%的缩放级别进行开发。没有可靠的跨浏览器方法来了解缩放级别，这意味着Window对象内部不提供此信息，因此无法使用它来调整图元的特性值。

作为后备方案，您可以将边框加粗，这样即使在缩放时也可以看到它。现在它没有显示，因为它可能会获得子像素大小，浏览器估计为不可渲染
请注意在缩放级别(而非100%)渲染的所有内容都完全是由每个浏览器内部选择如何估计和渲染的突发奇想决定的，您可以：

• 无法控制
• 可能会在没有通知的情况下更改

换句话说，你的初始陈述应该有一个小脚注：

*在合理限度内。缩放时的渲染取决于浏览器

Answer 2

我遇到了类似的边界消失问题。这个答案对我非常有帮助。用伪元素画边界。您案例的解决方案可能如下：

.mEditor {
display: flex;
/*border-bottom: 1px solid #d7d7d7;           <- REMOVE  */ 

position: relative;       /*   <- ADD   */
}
.mEditor::after{       /*   <- ADD   */
content: "";
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
border-bottom: 1px solid #d7d7d7;
}
.m-label {
width: 30%;
display: flex;
background-color: #f2f2f2;
}
.m-editor-noc {
flex: 1;
display: flex;
background-color: #FFFFFF;
/*border-left: 1px solid #d7d7d7;           <- REMOVE  */   
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

position: relative;       /*   <- ADD   */
}
.m-editor-noc::after{       /*   <- ADD   */
content: "";
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
border-left: 1px solid #d7d7d7;
}
.mfEditor {
display: flex;
flex: 1 0 auto;
}
.mEditor-li {
vertical-align: middle;
border-left: 1px solid #d7d7d7;
height: 18px;
display: inline-block;
margin-top: 3px;
}
.mEditor .tEditor {
border: none;
flex: 1;
padding-right: 6px;
}

<div class="m-group">
<div id="id251" class="mEditor">
<div class="m-label">
<label for="id223" title="Address">Address</label>
</div>
<div class="m-editor-noc">
<div id="id252" class="mfEditor">
<input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id254" class="mEditor">
<div class="m-label">
<label for="id224" title="Address 2">Address 2</label>
</div>
<div class="m-editor-noc">
<div id="id255" class="mfEditor">
<input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id257" class="mEditor">
<div class="m-label">
<label for="id225" title="Postcode">Postcode</label>
</div>
<div class="m-editor-noc">
<div id="id258" class="mfEditor">
<input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id25a" class="mEditor ">
<div class="m-label">
<label for="id20f" title="City">City</label>
</div>
<div class="m-editor-noc">
<div id="id25b" class="mfEditor">
<input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
<div id="id25d" class="mEditor">
<div class="m-label">
<label for="id228" title="District">District</label>
</div>
<div class="m-editor-noc">
<div id="id25e" class="mfEditor">
<input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id260" class="mEditor ">
<div class="m-label">
<label for="id210" title="Country">Country</label>
</div>
<div class="m-editor-noc">
<div id="id261" class="mfEditor">
<input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
</div>