根据浏览器的缩放级别,子div的背景颜色会出现奇怪的行为。会出现一些白色空格。
看这些例子:
缩放125%:
缩放150%:
缩放 175%:
缩放200%:
这是我的代码:
(JSFiddle链接:https://jsfiddle.net/3L4wfvyg/)
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.HeaderContainer3:hover {
color: white !important;
background-color: blue;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
当我从Container3中删除边框时,似乎问题不再出现,但我不知道是否因为白色颜色使问题难以看到。
.Container1
上设置默认的border: none
,而div
没有默认的border
。 - Aaron Sarnat