谁不能加起来，我还是Internet Explorer？ [英] Who can't add up, me or Internet Explorer?
问题描述
我试图提高我对CSS的理解，并创建了一个非常简单的页面，页脚和三列的简单页面。这看起来就像我在FF和Opera中预期的一样，但是（惊喜）在IE中给出了一个问题
。
您可以在 http://www.kidsinaction.org.uk/查看该页面3cols.html
如果查看源代码，您会看到用于创建列的三个div用于创建列名称为col1 ，col2和col3。
为了获得相等宽度的三列，在它们之间有一点
空间，我让三个div有每个宽度为30％，
左右填充为1％。最初，他们都剩下零和
右边距。通过我的学生数学，这使每个div 32％宽。三个
div，每个32％，96％，留下我4％的空间我希望在col1和col2之间以及col2和col3之间留下
。
因此，我向col2添加了2％的左右边距，这整齐地加到了
100％并且在另外两个中间留下了col2 smack。
所有这些在FF和Opera中运行良好，但在IE中，右栏
下降，大概是因为IE认为整体宽度
三者超过100％，因此将col3向下移动。我想要什么
才知道为什么IE会这么想？我通过给出
col2的左右边距1.8％来解决这个问题，但这意味着在FF
和Opera中，中间位置略微进一步中心的左边。
奇怪的是（或许没有），IE把它放在中间。
有什么解释吗？ TIA
免责声明：我知道从语义上来说，col1，col2和col3都是
不是div的好名字，因为它们反映了一个表现方面，而不是
a语义一。他们在这里使用它们，因为我正在尝试CSS，所以
想要确保我知道哪个是哪个。我保证不会在真实页面上这样做
!!
-
Alan Silver
（此行下面添加的任何内容都与我无关）
I was attempting to improve my understanding of CSS, and created a very
simple page with a header, footer and three columns. This looked just
like I expected in FF and Opera, but (surprise surprise) gave a problem
in IE.
You can see the page at http://www.kidsinaction.org.uk/3cols.html
If you look at the source, you will see that the three divs used to
create the columns are imaginatively named col1, col2 and col3.
In an attempt to get the three columns of equal width, with a little
space between them, I made the three divs have a width of 30% each, with
left and right padding of 1%. Initially, they all had zero left and
right margin. By my schoolboy maths, this makes each div 32% wide. Three
divs at 32% each makes 96%, leaving me 4% for the space I wanted to
leave between col1 and col2, and between col2 and col3.
Thus, I added 2% left and right margin to col2, which adds up neatly to
100% and leaves col2 smack in the middle of the other two.
All of this works fine in FF and Opera, but in IE, the right column
dropped down, presumably because IE thought that the overall width of
the three was more than 100%, so moved col3 downwards. What I would like
to know is why IE thought this? I worked around the problem by giving
col2 a left and right margin of 1.8% instead, but this means that in FF
and Opera, the middle col is slightly further to the left of centre.
Oddly enough (or maybe not), IE puts it right in the middle.
Any explanation? TIA
Disclaimer: I know that semantically speaking, col1, col2 and col3 are
not good names for the divs as they reflect a presentational aspect, not
a semantic one. They were used here as I was experimenting with CSS, so
wanted to ensure that I knew which was which. I promise not to do this
on a real page!!
--
Alan Silver
(anything added below this line is nothing to do with me)
推荐答案
2006年5月10日星期三15:02:34 +0100 Alan银< al ********* @ nospam.thanx.invalid>写道：
|我试图提高我对CSS的理解，并创建了一个非常好的
|带页眉，页脚和三列的简单页面。这看起来只是
|就像我在FF和Opera中预期的一样，但是（惊喜）给出了一个问题
|在IE浏览器中。
|
|您可以在 http://www.kidsinaction.org.uk/查看该页面3cols.html
|
|如果查看源代码，您会看到三个div用于
|创建列是富有想象力的名称col1，col2和col3。
|
|试图获得相等宽度的三列，有一点
|他们之间的空间，我使三个div的宽度分别为30％，
|左右填充1％。最初，他们都剩下零和
|右边距。通过我的学生数学，这使每个div 32％宽。三个
|每个32％的div占96％，留给我4％的空间我想要
|在col1和col2之间，以及col2和col3之间离开。
|
|因此，我向col2添加了2％的左右边距，这整齐地加到了
| 100％并且在另外两个中间留下col2。
|
|所有这些在FF和Opera中都很好用，但是在IE中，右列是
|摔倒，大概是因为IE认为整体宽度为
|三者超过100％，因此向下移动col3。我想要什么
|要知道为什么IE会这么想？我通过提供
|解决了这个问题col2左边和右边距为1.8％，但这意味着在FF
|和Opera一样，中间位于中心左侧稍远一点。
|奇怪的是（或许没有），IE把它放在中间位置。
|
|任何解释？ TIA
如果你继续缩小列的宽度，它在什么时候起作用
OK？并检查以确保它适用于不同的窗口大小和
用户字体大小不同。
此外，这样做总计加起来略少超过100％的帐户
为slop （由于在计算像素数时向上舍入而产生额外的像素
最终可能会导致总数超过1或2像素）。 99％应该这样做。
你_may_必须最终使用表格。并且CSS表格不为IE
所以你必须最终使用HTML表格。
|免责声明：我知道从语义上讲，col1，col2和col3是
|不是div的好名字，因为它们反映了一个表现方面，而不是
|一个语义的。他们在这里使用的是我在试验CSS，所以
|我想确保我知道哪个是哪个。我保证不会这样做
|在一个真实的页面上!!
这些名字是你的意思。可能是左，中，
和右等。可能会更好吗？
HTML标记中必须有一些表示方式，只是为了标记
。意思在页面之间变化，如果你想使用
相同的CSS来创建一个适用于许多_different_页面含义的布局，那么你需要使用的东西是最终没有任何意义除了
在演示文稿中的位置。
-
------- -------------------------------------------------- --------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| （名字）在ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
--------- -------------------------------------------------- ------------------
On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:
| I was attempting to improve my understanding of CSS, and created a very
| simple page with a header, footer and three columns. This looked just
| like I expected in FF and Opera, but (surprise surprise) gave a problem
| in IE.
|
| You can see the page at http://www.kidsinaction.org.uk/3cols.html
|
| If you look at the source, you will see that the three divs used to
| create the columns are imaginatively named col1, col2 and col3.
|
| In an attempt to get the three columns of equal width, with a little
| space between them, I made the three divs have a width of 30% each, with
| left and right padding of 1%. Initially, they all had zero left and
| right margin. By my schoolboy maths, this makes each div 32% wide. Three
| divs at 32% each makes 96%, leaving me 4% for the space I wanted to
| leave between col1 and col2, and between col2 and col3.
|
| Thus, I added 2% left and right margin to col2, which adds up neatly to
| 100% and leaves col2 smack in the middle of the other two.
|
| All of this works fine in FF and Opera, but in IE, the right column
| dropped down, presumably because IE thought that the overall width of
| the three was more than 100%, so moved col3 downwards. What I would like
| to know is why IE thought this? I worked around the problem by giving
| col2 a left and right margin of 1.8% instead, but this means that in FF
| and Opera, the middle col is slightly further to the left of centre.
| Oddly enough (or maybe not), IE puts it right in the middle.
|
| Any explanation? TIA
If you keep shrinking the width of the columns at what point does it work
OK in IE? And check to be sure it works with varying window sizes and
with varying user font sizes.
Also, do it with the total adding up to slightly less than 100% to account
for "slop" (an extra pixel due to rounding up when calculating pixel counts
could end up with the total being 1 or 2 pixels over). 99% should do it.
You _may_ have to end up using tables. And CSS tables are unknown to IE
so you''d have to end up using HTML tables.
| Disclaimer: I know that semantically speaking, col1, col2 and col3 are
| not good names for the divs as they reflect a presentational aspect, not
| a semantic one. They were used here as I was experimenting with CSS, so
| wanted to ensure that I knew which was which. I promise not to do this
| on a real page!!
The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?
There has to be some aspect of presentation in the HTML markup just to mark
what goes where. Meanings change from page to page, and if you want to use
the same CSS to create a layout applicable to many _different_ page meanings,
then you have to use something which ends up having no meaning besides what
goes where in the presentation.
--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
文章< e3 ********* @ news3。 newsguy.com>， ph ************** @ ipal .net
写道
< snip>
In article <e3*********@news3.newsguy.com>, ph**************@ipal.net
writes
<snip>
|任何解释？ TIA
如果你继续缩小列的宽度，它在什么时候起作用？在IE浏览器中好吗？
1.8％是它开始在IE工作的地方。我尝试了1.9％，但
也没用。
检查以确保它适用于不同的窗口大小和
使用不同的用户字体大小。
是的，完成了。它看起来非常一致，至少在你得到
极端组合之前;-)
另外，用总计加起来略低于100％来计算<对于slop而言（在计算像素数时，由于向上舍入而产生的额外像素可能会导致总数超过1或2像素）。 99％的人应该这样做。
这就是我的想法，但并不是那么简单。我不得不将我的
总宽度减少到99.6％而不是100％。在1280x1024（我的屏幕分辨率为
），这个.4％只有5个像素。那是很多的四舍五入错误！
你_may_必须最终使用表格。并且CSS表格不为IE所知，所以你必须最终使用HTML表格。
不，我可以忍受这些空格之间的几个像素差异，我想b / b
只是想知道是否有一些合理的解释，或简单
解决问题的方法。
|免责声明：我知道从语义上讲，col1，col2和col3是
|不是div的好名字，因为它们反映了一个表现方面，而不是
一个语义的。他们在这里使用的是我在试验CSS，所以
|我想确保我知道哪个是哪个。我保证不会这样做
|在一个真实的页面上!!
这些名字是你对他们意味着什么。可能是左，中，
和右。可能会更好？
不，因为HTML不应包含表示代码。如果我确定
决定改变列？这些名称将变得毫无意义
然后。
HTML标记中必须有一些表示方式只是为了标记
什么在哪里。
为什么？当然应该标记HTML以理解文档的结构
。 CSS然后使用它并添加演示文稿。
含义在页面之间变化，如果你想使用相同的CSS来创建适用于许多_different_页面含义的布局，<那么你必须使用一些最终没有任何意义的东西，除了
在演示文稿中的位置。
| Any explanation? TIA
If you keep shrinking the width of the columns at what point does it work
OK in IE?
1.8% was the point where it started working in IE. I tried 1.9%, but
that didn''t work either.
And check to be sure it works with varying window sizes and
with varying user font sizes.
Yup, done that. It seems pretty consistent, at least until you get to
extreme combinations ;-)
Also, do it with the total adding up to slightly less than 100% to account
for "slop" (an extra pixel due to rounding up when calculating pixel counts
could end up with the total being 1 or 2 pixels over). 99% should do it.
That''s what I thought, but it''s not that simple. I had to reduce my
total width to 99.6% instead of 100%. At 1280x1024 (my screen
resolution), that .4% comes out at just over 5 pixels. That''s quite a
lot of rounding errors!!
You _may_ have to end up using tables. And CSS tables are unknown to IE
so you''d have to end up using HTML tables.
Nah, I can live with the few pixels discrepancy between the spaces, I
just wondered if there was some rational explanation, or simple
workaround for the problem.
| Disclaimer: I know that semantically speaking, col1, col2 and col3 are
| not good names for the divs as they reflect a presentational aspect, not
| a semantic one. They were used here as I was experimenting with CSS, so
| wanted to ensure that I knew which was which. I promise not to do this
| on a real page!!
The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?
No, because the HTML shouldn''t contain presentational code. What if I
decided to shift the columns around? The names would become meaningless
then.
There has to be some aspect of presentation in the HTML markup just to mark
what goes where.
Why? Surely the HTML should be marked up to make sense of the structure
of the document. The CSS then works with that and adds presentation.
Meanings change from page to page, and if you want to use
the same CSS to create a layout applicable to many _different_ page meanings,
then you have to use something which ends up having no meaning besides what
goes where in the presentation.
相反，你应该使用反映
内容性质的名称。这样，名称在任何地方都有意义。对于
示例，div名称如sitelinks等。总是意味着一样。如果一个CSS
文件决定将链接放在页面顶部的div中，
和另一个CSS文件将它们放在左边缘，那么'' sa
表达问题。 HTML不应该反映出来。
无论如何，谢谢你的回复。
-
Alan Silver
（此行下面添加的任何东西都与我无关）
On the contrary, you should use names that reflect the nature of the
content. That way, the names have meaning wherever they are used. For
example, a div name like "sitelinks" always means the same. If one CSS
file decides to place the links in this div across the top of the page,
and another CSS file puts them down the left margin, well that''s a
presentational issue. The HTML shouldn''t reflect that.
Anyway, thanks for the reply.
--
Alan Silver
(anything added below this line is nothing to do with me)
ph ************** @ ipal.net 写道：
ph**************@ipal.net wrote:
2006年5月10日星期三15:02:34 +0100 Alan Silver< al ********* @nospam.thanx.invalid>写道：
|我试图提高我对CSS的理解，并创建了一个非常好的
带页眉，页脚和三列的简单页面。 ...
你_may_必须最终使用表格。
使用CSS轻松实现三栏页面。参见示例：
< http://benmeadowcroft.com/webdev/csstemplates/3-column.html>
< http://webhost.bridgew.edu /etribou/layouts/3col_footer/archives/3col_footer_02/index.html>
这些名字是你对他们的意思。可能是左，中，
和右。可能会更好吗？
On Wed, 10 May 2006 15:02:34 +0100 Alan Silver <al*********@nospam.thanx.invalid> wrote:
| I was attempting to improve my understanding of CSS, and created a very
| simple page with a header, footer and three columns. ...
You _may_ have to end up using tables.
Three-column pages are easy with CSS. See example:
<http://benmeadowcroft.com/webdev/csstemplates/3-column.html>
<http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html>
The names are whatever you mean for them to be. Maybe "left", "center",
and "right" might be better?
甚至更好：导航，内容和侧栏等等。或类似的 -
真正定义列的东西。用左表示接下来会发生什么？
一周你想把菜单移到右边？
-
-bts
-警告：我为草坪鹿刹车
Or even better: "navigation", "content", and "sidebar" or similar -
something that really defines the columns. With "left" what happens next
week when you want to move the menu to the right side?
--
-bts
-Warning: I brake for lawn deer
这篇关于谁不能加起来，我还是Internet Explorer？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
