不同的元素宽度和 CSS 宽度
Different element width and CSS width
当我使用 FF 检查器查看元素时，它显示 225 像素的宽度。
但是 CSS width: 207px 应用于此元素。
线索是 bootstrap。我认为它是由不同的分辨率造成这种差异的。
也有显示更改源的工具吗？
我的意思是在特殊 属性 更改时通知的工具。
在此先感谢您的帮助
这些取自 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%;
据我所知，您在输入中设置了 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 现在是内容 + 填充 + 边框宽度的总和。
用 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。
当我使用 FF 检查器查看元素时，它显示 225 像素的宽度。
但是 CSS width: 207px 应用于此元素。
线索是 bootstrap。我认为它是由不同的分辨率造成这种差异的。
也有显示更改源的工具吗？
我的意思是在特殊 属性 更改时通知的工具。
在此先感谢您的帮助
这些取自 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%;
据我所知，您在输入中设置了 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 现在是内容 + 填充 + 边框宽度的总和。
用 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。