文本输入上的圆角在移动视图中消失

Question

我正在做一个响应式网站项目，我决定使用border-radius属性对一些div，按钮和输入字段进行圆角处理。

一切看起来都很棒，除了当我进入移动模式时，其中一个文本输入失去了一半的圆角(在右侧(。

有人可以给我一个线索，为什么会发生这种情况吗？

这是我的一些代码：

<!--HTML-->
<section id="newsletter">
<div class="container">
<h1>Subscribe to our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="button1">Subscribe</button>
</form>
</div>
</section>

---

/* CSS */
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
border-radius: 12px;
}
.button1{
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
border-radius: 12px;
}
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
@media(max-width: 768px){
#newsletter h1,
#newsletter form{
float: none;
text-align: center;
width: 100%;
}
#newsletter button{
display: block;
width: 100%;
}
#newsletter form input[type="email"]{
width:100%;
margin-bottom: 5px;
}
}

谢谢！ 丹尼

Answer 1

实际上，它不会丢失任何东西 - 它只是溢出。有了溢出：隐藏了你拥有的，它只是隐藏的。

您遇到的问题是输入具有填充，因此您需要此 css 规则;

* {
box-sizing: border-box;
}

这意味着您将在元素的总宽度和高度中包含填充和边框。(* 表示所有元素(。这将在未来为您解决许多奇怪的意外行为。(你应该看看css重置(。

祝您编码愉快！