Question

我正在研究一个响应式网站项目，因此我决定使用border-radius属性来处理一些div，按钮和输入字段的角。

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

有人可以告诉我为什么会发生这种情况吗？

这是我的一些代码：

/* 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;
}
}

import Foundation
import Cocoa

class MyTabViewItem : NSTabViewItem
{
    let iconWidth:CGFloat = 16

    override func sizeOfLabel(_ shouldTruncateLabel: Bool) -> NSSize
    {
        var superSize: NSSize = super.sizeOfLabel(shouldTruncateLabel)
        superSize.width += iconWidth
        return superSize
    }

    override func drawLabel(_ shouldTruncateLabel: Bool, in tabRect: NSRect)
    {
        let icon: NSImage? = NSImage(named:"Eye")
        if icon != nil
        {
            let opacity:CGFloat = 0.5
            icon?.draw(in: NSMakeRect(tabRect.origin.x + tabRect.width - iconWidth + 4, 8, iconWidth, iconWidth), from: NSZeroRect, operation: NSCompositeSourceOver, fraction: opacity)

        }
        super.drawLabel(shouldTruncateLabel, in: tabRect)  
    }

}

谢谢！丹尼

Answer 1

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

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

* {
       box-sizing: border-box;
  }

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

编码愉快！

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

1 个答案: