DOCTYPE严格使用“正确”的盒子模型 - 那么为什么100％宽度现在没用？ [英] DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?
问题描述
考虑这个简单的HTML：
<！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" >
< head>
< title>严格杀死我的宽度！< / title>
< / head>
< body>
< table style =" width：400px; table-layout：fixed;">
< colgroup>
< col style =" width：50％;" />
< col style =" width：50％;" />
< / colgroup>
< tr>
< td>
< input type =" text"风格= QUOT;宽度：100％;" />
< / td>
< td>
< input type =" text"风格= QUOT;宽度：100％;" />
< / td>
< / tr>
< / table>
< / body>
< / html>
两个文本框的右边都被剪掉了。当然，正确
盒子模型表示宽度是内容的宽度，不包括
填充和边框（当然还有边距） 。）很棒。所以现在，
所有标准文本框（以及许多其他控件）都有类似
填充和边框的东西，百分比宽度有什么用呢？
我可以（而且，由于缺乏更好的解决方法）使用稍微宽一点的b $ b宽度，如98％，但必须根据
进行调整表的宽度和它有多少列 - 较小的表需要
更加减少文本框的宽度百分比。
我知道W3C中的天才认为他们的盒子模型是最好的，
但是如果你画一个盒子（基本上是一个边框）然后在它的中间写一些文字
在盒子边缘和
文本之间有一些空间，然后让任何孩子测量盒子的宽度，他会测量
从边界到边界，包括填充！
我知道，我应该停止抱怨并停止使用STRICT，对吧？好吧，
我可以，但那是向后退一步，
严格的doctype的其他部分非常有吸引力。
必须有一个可行的解决方案。当然，100％减去填充
减去边框是真正的答案，但因为那是不可能的（没有
使用动态属性）来指定这样的公式如宽度，我可以如何解决这个问题吗？
我感觉我很喜欢疯狂的药丸！
Consider this simple HTML:
<!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" >
<head>
<title>Strict kills my widths!</title>
</head>
<body>
<table style="width:400px; table-layout:fixed;">
<colgroup>
<col style="width:50%;"/ >
<col style="width:50%;"/ >
</colgroup>
<tr>
<td>
<input type="text" style="width:100%;" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>
</body>
</html>
Both text boxes have their right edges clipped off. Sure, the "Proper"
box model says that width is the width of the content, excluding the
padding and border (and margin, of course.) Wonderful. So now, with
all standard text boxes (and many other controls) having things like
padding and borders, what good is a percentage width?
I could (and do, for lack of a better workaround) use a slightly
smaller width, like 98%, but that has to be adjusted depending on the
width of the table and how many columns it has - smaller tables require
even more reduction in percentage width for the text boxes to fit.
I know the geniuses in the W3C think that their box model is the best,
but if you draw a box (essentially a border) and then write some text
in the middle of it with some space between the edge of the box and the
text, then ask any kid to measure the width of the box, he''ll measure
from border to border, INCLUDING padding!
I know, I should stop whining and just stop using STRICT, right? Well,
I could, but that''s a step backwards and there are other parts of the
strict doctype that are very appealing.
There''s got to be a viable solution to this. Sure, 100% minus padding
minus border is the real answer, but since that''s not possible (without
using dynamic properties) to put specify such a formula as width, how
can I solve this issue?
I FEEL LIKE I''M TAKING CRAZY PILLS!
推荐答案
Shadow Lynx写道：
Shadow Lynx wrote:
考虑这个简单的HTML：
考虑设置下一个演示页面并发布URL。我们是否应该猜测你是否在复制文本时犯了错误，并且
每个人和他的兄弟都应该设置一个文本页面只是因为你/ br / >
不能被打扰？
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 STRICT // EN"
根据规格，这是错误的。是否有任何影响是一个不同的问题，但为什么你会尝试使用错误的文档类型声明？
提示：引号中的内容区分大小写。
< col style =" width：50％;" />
< col style =" width：50％;" />
由于你没有设置cellpadding和cellspacing，它们默认为
非零的东西，虽然很小。当你被要求分配100％_and_一个像素时，你期望浏览器做什么
？
两个文本框的右边都被剪掉了。
我看不出你的意思。 （现在在IE 7 beta预览版上测试。）
你指的是哪个浏览器？
我知道，我应该停止抱怨并停止使用STRICT，对？
你应该停止抱怨并解释你想要完成的事情。
一般的想法是将一个表格字段放在一行上。这对
可用性和可访问性有好处。你可能会看到你的问题在一阵噗噗中消失了。
我觉得我喜欢疯狂的药片！
Consider this simple HTML:
Consider setting up a demo page and posting the URL next time. Are we
supposed to guess whether you made an error in copying the text, and is
everyone and his brother supposed to set up a text page just because you
couldn''t be bothered?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
That''s wrong, by the specs. Whether it has any impact is a different
matter, but why would you try with a wrong document type declaration?
Hint: the thing in quotes is case-sensitive.
<col style="width:50%;"/ >
<col style="width:50%;"/ >
Since you have not set cellpadding and cellspacing, they default to
something nonzero, though small. What did you expect a browser to do
when asked to allocate 100% _and_ a fex pixels?
Both text boxes have their right edges clipped off.
I can''t see what you mean. (Testing on IE 7 beta preview right now.)
Which browser(s) are you referring to?
I know, I should stop whining and just stop using STRICT, right?
You should stop whining and explain what you are trying to accomplish.
The general idea is to put one form field on one line. That''s good for
usability and accessibility. You might see your problem vanish in a puff
of reason.
I FEEL LIKE I''M TAKING CRAZY PILLS!
这是您错误输入文件类型声明的借口吗？
后续修剪。
Is that your excuse for mistyping the document type declaration?
Followups trimmed.
Jukka K. Korpela写道：
Jukka K. Korpela wrote :
Shadow Lynx写道：
Shadow Lynx wrote:
考虑这个简单的HTML：
Consider this simple HTML:
考虑设置一个演示页面和下次发布URL。我们是否应该猜测你是否在复制文本时犯了错误，并且是否每个人和他的兄弟都应该设置一个文本页面，因为你不能被打扰？
Consider setting up a demo page and posting the URL next time. Are we
supposed to guess whether you made an error in copying the text, and is
everyone and his brother supposed to set up a text page just because you
couldn''t be bothered?
我完全同意你在这里的网址请求/评论。没有
url总是很烦人，不方便。呜咽，婊子和
误解/混淆什么是带表格模型的CSS1盒子模型是
还烦人。
I fully agree with your request/comment of an url here. Not having an
url is always annoying, not convenient. Whining, bitching and
misunderstanding/confusing what is CSS1 box model with table model is
furthermore annoying.
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 STRICT // EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
根据规格，这是错误的。是否有任何影响是一个不同的问题，但为什么你会尝试使用错误的文档类型声明？
提示：引号中的内容区分大小写。
That''s wrong, by the specs. Whether it has any impact is a different
matter, but why would you try with a wrong document type declaration?
Hint: the thing in quotes is case-sensitive.
< col style =" width：50％;" />
< col style =" width：50％;" />
<col style="width:50%;"/ >
<col style="width:50%;"/ >
由于你没有设置cellpadding和cellspacing，它们默认为非零的东西，虽然很小。当你被要求分配100％_and_一个像素时，你对浏览器的期望是什么？
Since you have not set cellpadding and cellspacing, they default to
something nonzero, though small. What did you expect a browser to do
when asked to allocate 100% _and_ a fex pixels?
[剪断了我同意的有效批评]
"在这个[自动表格布局]算法中（通常不需要
超过两遍），表格的宽度由宽度给出它的
列（以及介入的边界）。来自CSS 2.1，第17.5.2.2节
http://www.w3.org/TR/CSS21/tables.ht...o-table-layout
表'的cellpadding通常包含在列宽中。在列宽之上没有添加
。并且有浏览器
不相容。 Mozilla rv：1.8+（Firefox 1.5.x，Seamonkey
1.x）和Opera 6.06得到了正确但IE6，IE 7 beta 2，Firefox 1.0.x，
NS 7+，Opera 7+都错了。
http://www.gtalbot.org/BrowserBugsSe...gColWidth.html
$ b $bGérard
-
删除等等给我发电子邮件
[snipped valid criticism that I agree with]
"In this [automatic table layout] algorithm (which generally requires no
more than two passes), the table''s width is given by the width of its
columns (and intervening borders)." coming from CSS 2.1, Section 17.5.2.2
http://www.w3.org/TR/CSS21/tables.ht...o-table-layout
The table''s cellpadding is normally included in the column width. It''s
not added on top of the column width. And there are browser
incompatibilities on this. Mozilla rv:1.8+ (Firefox 1.5.x, Seamonkey
1.x) and Opera 6.06 got this right but IE6, IE 7 beta 2, Firefox 1.0.x,
NS 7+, Opera 7+ all got this wrong.
http://www.gtalbot.org/BrowserBugsSe...gColWidth.html
Gérard
--
remove blah to email me
我没有提供演示页面的道歉。
你可以在
http：//www.digitolle。 net / google / hotboxmodelaction.htm
你对DOCTYPE系列是正确的 - 它应该是这个（我认为）：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
你好也正确，它对渲染没有影响。
再一次，你没有指定cellpadding意味着它是正确的
默认为a非零值，意味着默认有填充。
是的，我知道这一点，我确实想在表格单元格中填充。
我想要的是浏览器在父对象的USEABLE
客户区内呈现对象。我相信
的最佳例子是正确的盒子模型无法有效和逻辑是当使用
a标准文本框设置为标准表格单元格中的100％宽度与
默认边框，填充等。场景，表格被设置为
table-layout：fixed，这当然意味着表格没有基于其内容及其内容的布局。单元格宽度很难设置。
如果你有一个父对象有填充，你有一个孩子
对象有边框和填充（让'现在假定为零利润）
你将子对象的宽度设置为100％，将父对象设置为
特定的像素宽度，让''只说250px，正确的盒子模型
声明子对象的新宽度将是250px加上它的填充
和边框宽度。这完全是不合逻辑的。让孩子画一些文字，然后给那个文本留一个小距离的边框，然后让b / b
然后让同一个孩子测量新物体的宽度。
将测量包括边框（以及边框之间的填充
和他创建的文字）！
请，哦明智的css盒模型，向我解释正确的
方式使用Strict并且让子对象有填充和边框设置
到100％宽度里面父对象有填充和固定
宽度。这就是我想知道的。这不仅仅是关于桌子和
单元格，它也是关于Div内部的任何对象等等。
My humble apologies for not providing a demo page.
You can see it in action at
http://www.digitolle.net/google/hotboxmodelaction.htm
You''re right about the DOCTYPE line - it should be this (I think):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You''re also right that it has no impact on the rendering.
Once again, you''re right that not specifying cellpadding means that it
defaults to a non-zero value, meaning that there is padding by default.
Yes, I''m aware of this and I do want padding in my table cells.
What I WANT is for the browser to render an object within the USEABLE
client area of a parent object. The best example of where I believe
the "correct" box model fails to be effective and logical is when using
a standard text box set to 100% width within a standard table cell with
default borders, padding, etc. In ths scenario, the table is set to
table-layout: fixed, which, of course, means that the table doesn''t
base its layout on its contents and its cell widths are hard set.
If you have a parent object that has padding and you have a child
object that has a border and padding (let''s assume zero margin for now)
and you set the child object''s width to 100% and the parent object to a
specific pixel width, let''s just say 250px, the "correct" box model
states that the child object''s new width will be 250px PLUS its padding
and border widths. This is completely illogical. Ask a child to draw
some text and then give that text a border a small distance away and
then ask the same child to measure the width of the new object and he
will measure including the border (and the "padding" between the border
and text he created)!
Please, oh wise ones of the css box model, explain to me the correct
way to use Strict and have child objects with padding and borders set
to 100% width inside of parent objects that have padding and fixed
widths. That''s all I want to know. This isn''t just about tables and
cells, it''s about any object inside of a Div, etc. as well.
这篇关于DOCTYPE严格使用“正确”的盒子模型 - 那么为什么100％宽度现在没用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
