gpt4 book ai didi

css - 如何在不同的浏览器中使用填充?

转载 作者:行者123 更新时间:2023-12-02 05:11:19 26 4
gpt4 key购买 nike

我在使用填充时有一些奇怪的行为。

我有一个 div 作为包装器。这个包装器的两边都有 25px 的填充:

.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}

在那个包装器中,我有一个带有以下 css 的输入字段:

input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}

作为错误类:

input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}

所以通过正确的方式设置它让我变得疯狂。问题是 chrome/safari 和 Firefox 在处理填充属性方面似乎有所不同。例如,当在 chrome/safari 中保留 height 属性时,会自动将 padding top/bottom 添加到输入字段中。在 firefox 中,输入字段的高度不同。显示图像:

火狐: firefox

Chrome : chrome

主要问题是我想将输入字段置于包装器 div 的中心。输入的宽度应为 180px。这意味着每边左边有 25px。每边的文本填充也是 5px。因此,当使用填充属性时,输入字段的新宽度是宽度减去填充。所以这将是第一个问题。当使用 5px 的 pading-leftpadding-right 时,这等于 180px(宽度输入字段)减去 10px(填充)还是因为左手的填充 0px侧 +5px 和右侧 -5px?那么输入字段的正确宽度是多少?

第二个问题是关于错误类的。在那里,我将添加一张图片,并希望将右手边距从 5px 增加到 20px。即使在这里,问题是输入字段的宽度是多少?我认为背后的逻辑是 180px 减去 +5px,-20px 就是 165px?

第三个问题:我尝试了所有方法,但每个浏览器的结果都不一样。我的逻辑背后是否存在错误,因为填充是否应该填充?

最佳答案

将 css3 框大小添加到每个具有填充的元素。它将解决问题。

 .text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

关于css - 如何在不同的浏览器中使用填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15407560/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com