在表单上,我有一个选择和两个输入字段.这些元素垂直对齐.不幸的是,我无法获得这些元素的相等宽度.
这是我的代码:
<select name="name1" style="width:198px">
<option>value1</option>
<option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">
对于上面的例子,select元素的最佳宽度是198或199 px(当然我尝试了193px,但差别很大).我认为,这取决于各种计算机和浏览器的分辨率,因为这些元素没有相同的宽度(有时我认为差异大约是1或2像素).我试图在div或table行中设置这些元素,但它没有帮助.
问:我如何才能获得这些元素的精确宽度？
我的印象是,浏览器(如Safari,Chrome和Firefox)中的用户代理样式表是浏览器内部的,无法直接修改(而是需要覆盖样式属性).
由于包括Mozilla在内的各种网站,Webkit和Mozilla 的box-sizing属性的默认值是"content-box",我也感觉不到.
我在各种浏览器中查看的相当简单的虚拟页面上测试了这个.
我的问题是,在我们的生产应用程序的两个页面上,默认属性是不同的,我们无法弄清楚为什么会这样.
在一页中,我们在Web Inspector或控制台中看到了"border-box"的box-sizing属性.它被分配给CSS选择器输入:not([type ="image"]),textarea.
在另一页上,没有提到Web Inspector或控制台中的box-sizing属性.
有没有人知道是否有某种方法直接影响特定页面的用户代理样式表中的box-sizing定义？也许有一个图书馆这样做？我们在应用程序中使用prototype.js和swfobject.js ......
更新:如果我在我的Web应用程序和每个"虚拟"页面中几乎每个页面都不清楚,我在box-sizing属性上测试过具有默认的"content-box"值.出于某种原因,我的Web应用程序中的一个特定页面在Web检查器中显示用户代理样式表(浏览器用于其默认值的样式表)已将该属性设置为"border-box".我无法为我的生活找出原因.我正在寻找可能导致Firefox更改其属性的默认值的任何内容.
在下面的代码段中,第一行有两个div flex-grow: 1.正如预期的那样,每个div占据屏幕的50%.
向左侧div添加填充时,情况就不再如此.有人可以解释原因吗？
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
}<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>在CSS中使用box-sizing:border-box时,我假设元素的总宽度将在其"width"值中定义.因此,如果我说分区的宽度是20px而右边界是10px,我最终将得到一个占据20px空间的盒子,其中一半是右边界.将它推到我将宽度设置为10px和右边框的位置,就像这里:
#box{
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 100px;
background: black;
border-right: 10px solid red;
}?
盒子只包含红色边框.当我将宽度设置为0px时会发生什么？我认为它会让整个事情消失,但不会,结果与上面的结果完全相同:jsFiddle
我的问题是,这是否是预期的行为.似乎与我不一致.我想让一个盒子消失,只能操纵宽度/高度.感谢您的任何意见.
我正在使用box-sizing:border-box模型.当内联块元素(容器)中包含具有最小宽度的内联块元素时,Internet Explorer 9中的容器太宽.在FF 10.0,Chrome 17.0,Opera 11.5和Safari 5.1.2中按预期工作.
顺便说一下,宽度而不是最小宽度就像一个魅力.
有任何想法吗？
我意识到它<input type="submit"/>有一个border-box盒子模型,而<input type="text"/>有一个content-box盒子模型.IE8和FF中存在此行为.不幸的是,这阻止了我将这种风格用于漂亮的均匀大小的输入:
input, textarea
{
border: 5px solid #808080;
padding:0px;
background-color:#C0C0C0;
width:20em;
}
这是IE和FF的正确行为吗？是否存在跨浏览器解决此问题的方法？
我将开始开发一个新网站,我正准备处理浏览器用于计算元素宽度和高度的不同方法(盒子模型的东西).不知怎的,我想到了:如果我只是申请box-sizing网站上的所有元素怎么办？
我是其中一个认为这box-sizing: border-box;是CSS中最好的命令之一,但有其局限性.然而,同样的限制让我想知道我是否应该适用box-sizing于所有元素:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
当然,我的网站应该与尽可能多的浏览器兼容,并box-sizing在我们考虑IE7时产生一些问题.但是,有时候时间表太紧,以至于不用担心这个具体问题就可以获得额外的几分钟.
无论如何,你认为适用box-sizing:border-box;于所有元素是一个好的政策还是我应该只对实际需要它的元素这样做？
请考虑以下示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
div { width: 15em }
input, textarea, select { width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
</style>
</head>
<body>
<form>
<div>
<input value="Input">
</div>
<div>
<textarea>Text area</textarea>
</div>
<div>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</form>
</body>
</html>
在支持border-box框大小调整的浏览器上,这将按我的要求呈现:
正确渲染http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png
但是,在IE 6/7上,它呈现为:
IE 6/7渲染http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png
如何在IE 6/7中获得与其他浏览器相同的渲染,而无需设置像素大小？
我正在使用一个小的2窗格布局display:table.对于间距(也来自背景图像),我使用padding.因为我需要孩子们width:50%从可用空间中得到一个精确的(考虑到父母的填充div),我使用box-sizing:border-box.
这在Opera中运行良好,但在Chrome中box-sizing:border-box甚至会-webkit-box-sizing:border-box被忽略.
我做了一个演示,显示了这个问题.两个红色框应为方形,蓝色框的宽度和高度应为200px:http://jsfiddle.net/fabb/JKECK/
这是html源代码:
<div id="table">
<div id="left">
Something on the left side
</div>
<div id="right">
Something on the right side
</div>
</div>
和css:
#table {
display: table;
/*border-collapse: collapse;*/
width: 200px !important;
height: 200px !important;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
margin: 0;
border: 1px solid blue;
padding: 60px 20px;
}
#table #left, #table #right {
display: table-cell;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box; …我从未遇到过这个问题,但简而言之,我将边框应用于所有元素的框大小:
*, *:before, *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
我有一个响应列布局,在这种情况下每行3列
<div class="row clearfix">
<div class="column span-4-12 property">
<p>..</p>
</div>
<!-- more divs here -->
</div>
所有跨越3列都很好,直到我为.property div添加边距,现在通常因为边框,这只会在列之间添加边距并将它们连续3行,但现在由于某种原因,第3列被推到了新的排,老实说我不明白为什么,我错过了什么？
以下是jsFiddle的实例:http://jsfiddle.net/NmrZZ/
border-box ×10
css ×10
css3 ×5
html ×4
flexbox ×1
html-select ×1
input ×1
margin ×1
padding ×1
user-agent ×1