不同的元素宽度和 CSS 宽度

Question

当我使用 FF 检查器查看元素时，它会显示 225px 宽度。
但 CSS width: 207px 应用于此元素。
线索是引导程序。我认为它通过不同的分辨率导致了这种差异。 还有一个工具可以揭示变化的来源吗？
我的意思是一种在特殊属性更改时通知的工具。
提前感谢您的任何帮助

这些来自 FF Inspector 的两种状态：
元素是 input[type=text]

<input aria-invalid="true" class="invalid" name="jform[university]" id="jform_university" value="" required="" aria-required="true" type="text">

状态 1：宽度 = 225px

*::-moz-selection {
    background: #F9924F none repeat scroll 0% 0%;
    color: #FFF;
}
element {
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
    max-width: 207px !important;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFF;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    border-radius: 5px;
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    padding: 0px 8px;
    border: 1px solid #CACACA;
    color: #424242;
    background: #FFF none repeat scroll 0% 0%;
    font-family: Tahoma;
}
.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
}
body, a, input, .jm-title, .jm-module, .btn {
    font-family: Yekan !important;
}
input, textarea, .uneditable-input {
    margin-left: 0px;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}
input, textarea, select, .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    border: 1px solid #CCC;
}
label, input, button, select, textarea {
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0px;
    font-size: 100%;
    vertical-align: middle;
}
body {
    color: #6A6A6A;
    font-family: Tahoma;
    font-size: 11px;
}
body {
    line-height: 1.5em;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
}
html {
    font-size: 100%;
}

状态 2：宽度 = 207px

*::-moz-selection {
    background: #F9924F none repeat scroll 0% 0%;
    color: #FFF;
}
element {
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
    max-width: 207px !important;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFF;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    border-radius: 5px;
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    padding: 0px 8px;
    border: 1px solid #CACACA;
    color: #424242;
    background: #FFF none repeat scroll 0% 0%;
    font-family: Tahoma;
}
.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
}
body, a, input, .jm-title, .jm-module, .btn {
    font-family: Yekan !important;
}
input, textarea, .uneditable-input {
    margin-left: 0px;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}
input, textarea, select, .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    border: 1px solid #CCC;
}
label, input, button, select, textarea {
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0px;
    font-size: 100%;
    vertical-align: middle;
}
body {
    color: #6A6A6A;
    font-family: Tahoma;
    font-size: 11px;
}
body {
    line-height: 1.5em;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
}
html {
    font-size: 100%;

Answer 1

据我了解，您在输入中设置了width:207px，并问自己（和我们）为什么它在页面上显示为225px 宽度。

您似乎遇到了 css box model 计算。

---

默认情况下（这是您所处的模式，因为您没有指定其他任何内容）框处于box-sizing:content-box 模式。你想要的是box-sizing:border-box，因为它几乎总是表现得更自然。要将其应用于元素，您必须在其上设置 box-sizing 属性。

_{（来源：binvisions.com）}

内容框

仅根据元素的内容计算元素的width/height。。这意味着padding、border-width 和margin 都在元素的尺寸“外部”。

当您在此模型中指定 width:207px 时，这意味着“此元素的内容应为 207 像素宽”。填充和边框宽度被添加到其中。

边框

将padding 和border-width 添加到此计算中。 width 现在是 content + padding + border-width 的总和。

用padding:8px 和border-width:1px 指定width:207px 表示有207px - 2*8px - 2*1px = 189px 内容空间。

---

针对问题的解决方案

你申请

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    padding: 0 8px;
    border: 1px solid #CACACA;
}

当您处于content-box 模式时，计算出的宽度为207px + 2*8px + 2*1px，这正是您观察到的225px。

将box-sizing:border-box 应用于该元素，它就可以工作了。但要注意，这可能会破坏该样式的所有其他内容。也许你最好对它应用width:189px。