更简单的填充bug的例子 [英] simpler example of the padding bug

问题描述

这是我看到的填充错误的更简单（无阴影）示例：

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

到目前为止，我在CSS2文档中找不到任何内容，说我应该得到这个

类似的不一致结果。


- -

----------------------------------------- ------------------------------------

| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |

| （名字）在ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |

--------- -------------------------------------------------- ------------------

解决方案

ph ************** @ ipal.net 写道：

这是我看到的填充错误的更简单（无阴影）示例：

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

这只是一个错误，如果你已经正确地完成了它*它仍然*不起作用。


来自上面提到的网页：


" ;每个表格单元格包裹在1px纯红色边框中。每个表格单元格

也有2px自己的填充，只是为了让红色边框稍微远离按钮
，这样更容易看到。请注意表格

单元格填充是不对称的（另一个错误？）。


删除高度：100％;宽度：100％;来自.menu_button解决了这个

问题。这不是一个bug。

你有.pad_top，.pad_right，.pad_bottom，.pad_left

你可能希望改变*到以下代码：


..pad_top {

margin-top：20px;

padding-top：20px;

}

..pad_right {

margin-right：20px;

padding-right：20px;

}

..pad_bottom {

margin-bottom：20px;

padding-bottom：20px;

}

..pad_left {

margin-left：20px;

padding-left：20px;

}


如果我错过了页面上提出的任何问题，我会很高兴

如果你提到他们的话，就会解决这些问题。

-

Brian O''Connor（ironcorona）

ironcorona写道：

ph ************** @ ipal.net 写道：

这是一个更简单的（没有阴影）e我看到填充错误的例子：

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

到目前为止，我一无所获CSS2文件说我应该得到这种不一致的结果。

这只是一个错误，如果你已经正确地完成它*它仍然*没有从上面提到的网页：

"每个表格单元格都用1px纯红色边框包裹起来。每个表格单元格也有2px自己的填充，只是为了使红色边框稍微远离按钮，所以更容易看到。请注意表格
单元格填充是不对称的（另一个错误？）。

删除高度：100％;宽度：100％;来自.menu_button解决了这个问题。这不是一个bug。

你有.pad_top，.pad_right，.pad_bottom，.pad_left
你可能希望改变*到*以下代码：

.pad_top {
margin-top：20px;
padding-top：20px;
}
.pad_right {
margin-right：20px;
padding-right：20px;
}
.pad_bottom {
margin-bottom：20px;
padding-bottom：20px;
}
.pad_left {
margin-left：20px;
padding-left：20px;
}
如果我错过了页面上提出的任何问题如果你提到它们是什么，我会很高兴地解决它们。

ps。你可能想在IE中查看页面，其中display：table;并且

不支持所有相关属性。

-

Brian O''Connor（ironcorona）

On Tue，2006年5月9日02:28:26 +0800 ironcorona< ir ********* @ gmail.com>写道：

| ironcorona写道：

|> ph ************** @ ipal.net 写道：

|>>这是我看到的填充错误的更简单（无阴影）示例：

|>>

|>> http：//phil.ipal。 org / usenet / ciwas / 20 ... buttons-1.html

|>>

|>>到目前为止，我在CSS2文档中没有发现我应该得到这个

|>>结果不一致。

|>

|>这只是一个错误，如果你已经正确地完成它*它仍然*不起作用。

|>

|>从上面提到的网页：

|>

|> 每个表格单元格包裹在1px纯红色边框中。每个表格单元格

|>也有2px自己的填充只是为了获得红色边框一点

|>远离按钮，因此更容易看到。请注意表格

|>单元格填充不对称（另一个错误？）。

|>

|>去除高度：100％;宽度：100％;来自.menu_button解决了这个

|>问题。这不是一个bug。


然后你建议让表格单元格内的盒子扩展

来完全填充表格单元格？使用高度：100％和宽度：100％是

在其他地方的另一个例子中推荐的。


尽管如此，填充没有任何意义添加到左侧应该增长

右侧，尤其是_beyond_包含

元素（表格单元格）的界限。这不是CSS2文档所描述的内容。

你能描述为什么会发生这种

填充效果的定义和/或机制，只应该用宽度/高度在100％？

我正在试图理解这一点（它本身并没有做任何事情）。


看起来确实如此成为HTML布局的一般问题，以获取内容

扩展并填写它所在的容器。有时，即使

反向也是如此。尝试使用一个独立的盒子来封装一块

的文本而不扩展到整个显示宽度。那是用HTML表格，透明GIF和其他一些人不喜欢的东西粘贴处理的

。为了远离那些黑客，确实需要一个正确的方法来完成人们想要做的所有事情。

|>你有.pad_top，.pad_right，.pad_bottom，.pad_left

|>您可能希望将*改为*以下代码：

|>

|> .pad_top {

|> margin-top：20px;

|> padding-top：20px;

|> }

|> .pad_right {

|> margin-right：20px;

|> padding-right：20px;

|> }

|> .pad_bottom {

|> margin-bottom：20px;

|> padding-bottom：20px;

|> }

|> .pad_left {

|> margin-left：20px;

|> padding-left：20px;

|> }

|>

|>如果我错过了页面上提出的任何问题，我会很高兴

|>如果你提到他们是什么，请解决他们。

|

| PS。你可能想在IE中查看页面，其中display：table;和

|不支持所有相关属性。


没有IE在这里运行。抱歉。他们没有制作它的便携版本。

由于Firefox可移植到Windows，我至少可以推荐给Windows用户
。
< br $> b $ b -

--------------------------------- --------------------------------------------

| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |

| （名字）在ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |

--------- -------------------------------------------------- ------------------

Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

解决方案

ph**************@ipal.net wrote:

Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.

It''s only a bug if you''ve done it correctly and it *still* doesn''t work.

From the above mentioned web page:

"Each table cell is wrapped in a 1px solid red border. Each table cell
also has 2px of its own padding just to get the red border a little
distant from the button so it is easier to see. Notice how the table
cell padding is NOT symmetrical (another bug?)."

Removing height:100%; and width:100%; from .menu_button solves this
problem. It''s not a bug.
Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
you might wish to alter *to* the following code:

..pad_top {
margin-top: 20px;
padding-top: 20px;
}
..pad_right {
margin-right: 20px;
padding-right:20px;
}
..pad_bottom {
margin-bottom: 20px;
padding-bottom: 20px;
}
..pad_left {
margin-left: 20px;
padding-left: 20px;
}

If I''ve missed any of the questions posed on the page I''d be happy to
address them if you mention what they are.
--
Brian O''Connor (ironcorona)

ironcorona wrote:

ph**************@ipal.net wrote:

Here is a simpler (no drop shadows) example of the padding bug I see:

http://phil.ipal.org/usenet/ciwas/20...buttons-1.html

So far I find nothing in the CSS2 document that says I should get this
kind of inconsistent result.

It''s only a bug if you''ve done it correctly and it *still* doesn''t work.

From the above mentioned web page:

"Each table cell is wrapped in a 1px solid red border. Each table cell
also has 2px of its own padding just to get the red border a little
distant from the button so it is easier to see. Notice how the table
cell padding is NOT symmetrical (another bug?)."

Removing height:100%; and width:100%; from .menu_button solves this
problem. It''s not a bug.
Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
you might wish to alter *to* the following code:

.pad_top {
margin-top: 20px;
padding-top: 20px;
}
.pad_right {
margin-right: 20px;
padding-right:20px;
}
.pad_bottom {
margin-bottom: 20px;
padding-bottom: 20px;
}
.pad_left {
margin-left: 20px;
padding-left: 20px;
}

If I''ve missed any of the questions posed on the page I''d be happy to
address them if you mention what they are.

ps. You might want to view the page in IE, where the display:table; and
all the associated properties are not supported.
--
Brian O''Connor (ironcorona)

On Tue, 09 May 2006 02:28:26 +0800 ironcorona <ir*********@gmail.com> wrote:
| ironcorona wrote:
|> ph**************@ipal.net wrote:
|>> Here is a simpler (no drop shadows) example of the padding bug I see:
|>>
|>> http://phil.ipal.org/usenet/ciwas/20...buttons-1.html
|>>
|>> So far I find nothing in the CSS2 document that says I should get this
|>> kind of inconsistent result.
|>
|> It''s only a bug if you''ve done it correctly and it *still* doesn''t work.
|>
|> From the above mentioned web page:
|>
|> "Each table cell is wrapped in a 1px solid red border. Each table cell
|> also has 2px of its own padding just to get the red border a little
|> distant from the button so it is easier to see. Notice how the table
|> cell padding is NOT symmetrical (another bug?)."
|>
|> Removing height:100%; and width:100%; from .menu_button solves this
|> problem. It''s not a bug.

Then what do you suggest to get the box inside the table cell to expand
to fully fill the table cell? The use of height:100% and width:100% was
what was recommended in an another example elsewhere.

Still, it makes no sense that padding added to the left side should grow
the right side, and especially to do so _beyond_ the bounds of the containing
element (the table cell). This is not what the CSS2 document describes.
Could you describe the definitions and/or mechanisms of why this kind of
padding effect should happen and only should with width/height at 100%?
I''m trying to make sense of this (it doesn''t make any on its own).

It does seem to be a general problem with HTML layout to get stuff to
expand and fill out the container it is in. And sometimes, even the
reverse is true. Try getting a standalone box to just enclose a piece
of text without expanding to the whole display width. That has been
dealt with in the paste with HTML tables, transparent GIFs, and other
things some people don''t like. To get away from those hacks, there does
need to be a right way to do all the things people want to do.
|> Where you have .pad_top, .pad_right, .pad_bottom, .pad_left
|> you might wish to alter *to* the following code:
|>
|> .pad_top {
|> margin-top: 20px;
|> padding-top: 20px;
|> }
|> .pad_right {
|> margin-right: 20px;
|> padding-right:20px;
|> }
|> .pad_bottom {
|> margin-bottom: 20px;
|> padding-bottom: 20px;
|> }
|> .pad_left {
|> margin-left: 20px;
|> padding-left: 20px;
|> }
|>
|> If I''ve missed any of the questions posed on the page I''d be happy to
|> address them if you mention what they are.
|
| ps. You might want to view the page in IE, where the display:table; and
| all the associated properties are not supported.

No IE running here. Sorry. They don''t make a portable version of it.
Since Firefox is portable to Windows, I can at least recommend it to
Windows users.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

这篇关于更简单的填充bug的例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！