不同的元素宽度和CSS宽度

时间：2015-08-23 12:29:18

标签： css twitter-bootstrap width

当我使用FF检查器查看元素时，它显示225px的宽度 但CSS宽度：207px适用于此元素 线索是引导程序。我认为它会因不同的分辨率而产生这种差异。 还有一个揭示变更来源的工具吗？ 我的意思是当特殊财产发生变化时通知的工具 提前感谢您的任何帮助

这些来自FF Inspector的两个州：
元素输入[type = text]

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


状态1：宽度= 225px

＆＃13;
＆＃13; 
*::-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%;
}
＆＃13;
＆＃13;
＆＃13;

状态2：宽度= 207px

＆＃13;
＆＃13; 
*::-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%;
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

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

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

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg

内容框

仅从其内容计算元素的width / height。这意味着padding，border-width和margin都是＆＃34;外部＆＃34;元素的维度。

在此模型中指定width:207px时，这意味着＆＃34;此元素的内容应为207 px宽＆＃34;。填充和边框宽度都会添加到其中。

边界框

将padding和border-width添加到此计算中。 width现在是内容+填充+边框宽度的总和。

使用width:207px和padding:8px指定border-width:1px表示内容有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应用于它。

相关问题
最新问题