奇数边框+填充行为：跨浏览器 [英] Odd border + padding behavior: cross-browser

问题描述

大家好，


我已经通过谷歌，一点点回击，css讨论档案，

并向列表发送请求一切都无济于事。我咨询了

positioniseverything.net和quirksmode.org。我所遇到的问题似乎很简单，以至于我已经在任何这些来源上提出了这个问题，但是，

唉，事实并非如此。


所以，请参考

http://www.erectlocution.com

有问题的页面
。以下是问题：


（a）IE 6

此浏览器在呈现页面时出现一些问题。带有ID #contentWrapper的

div的边框在初始加载时渲染得很好，但是

是每个右边界和左边界的一部分，不会被渲染

在折叠下方，即在渲染页面的底部下方，即在垂直滚动时显而易见的
。当

向上滚动时，也会发生这种情况 -

页面顶部先前渲染的边框渲染效果不佳。


此外，当鼠标悬停在一个链接上时，边框渲染变为

不同，如果可预测的话，破坏：左边和右边的某些部分
$ b $ W的边界消失，从大约100px开始，它的上边缘和上边缘的50px左右。无论如何，对我来说，它很容易重现。


最后 - 这可能是在quirksmode.org上的某个地方或

positioniseverything.org，但

我的优先级较低 -

#header div和
$之间存在3px之间的差距b $ b #contentWrapper div。无论我是否通过条件评论提供IE特殊的

渲染说明，都会发生这种情况。


（b）Firefox 1.0.7 / WinXP和Mac OS X


#header与#contentWrapper

div之间的差距大约为15px。我已经浏览了相当贫血的

CSS，但在代码本身中没有找到任何理由。

XHTML和CSS都验证了它的价值。我已经应用了一个负的

保证金，对于FF，它工作得很好，但是这导致Safari显示右边框的一部分右边框重叠了15px。那么，
Safari会让页面比我尝试过的任何东西都更好。


总的来说，它并不是关键的错误;但我真的很喜欢这样一个简单的网站来渲染这个简单的网站。我很欣赏任何提示和指示

的方式。


谢谢，


Daniel

Hi all,

I''ve trolled through Google, a little of evolt, css-discuss archives,
and sent the list a request, all to no avail. I consulted
positioniseverything.net and quirksmode.org. The issue I have seems
simple enough that I''d have turned it up on any of those sources, but,
alas, that''s not the case.

So, please refer to

http://www.erectlocution.com

for the page in question. Here are the issues:

(a) IE 6

This browser has some issues rendering the page. The borders of the
div with ID #contentWrapper render fine on initial loading, but there
is a portion of each of the right and left borders which isn''t rendered
"below the fold", i.e. below the bottom of the rendered page, which is
evident on vertical scrolling. This behavior also occurs when
scrolling back up--the previously rendered border at the top of the
page is poorly rendered.

Additionally, when mousing over a link, the border rendering becomes
differently, if predictably, broken: some part of the left and right
borders of #contentWrapper disappear, starting around 100px below it''s
top edge and 50px or so above its bottom edge. It''s easily
reproducible, for me anyway.

Lastly--and this is probably somewhere on quirksmode.org or
positioniseverything.org, but of
lower priority for me--there is a gap of something like 3px between the
#header div and the
#contentWrapper div. This happens whether or not I feed IE special
rendering instructions via conditional comments.

(b) Firefox 1.0.7 / WinXP and Mac OS X

There is a gap of about 15px between the #header and #contentWrapper
divs rendered via Firefox. I have scoured through the fairly anemic
CSS and not found any reason for this in the code itself. Both the
XHTML and CSS validate, for what it''s worth. I had applied a negative
margin, which, for FF, worked perfectly, but which caused Safari to
display part of the right border overlapping the header by those 15px.
Safari, then, renders the page better than anything else I''ve tried.

Overall, it''s not critical faultiness; but I''d really like such a
simple site to render nicely. I appreciate any tips and pointers along
the way.

Thanks,

Daniel

推荐答案

好吧，我在FF 1.5中看不出任何问题，但是Netscape和opera都显示了

你描述的差距Firefox浏览器。我觉得有趣的是，差距是与你在条件IE语句中定义的差距相同的大小。


IE 6显示了双方，大约在你所描述的区域内 - 但是在我的浏览器上，它会以这种方式加载并保持这种状态。并且

它与页面边框的位置无关。


我不知道这是否有用，或者多少 - 但我已经注意到

离开FF中的单位往往会导致问题，而且你已经在你的一些paddng和边距定义中完成了这个 -


基本上都是'0''。它甚至可能都不相关，但我会从那里开始。$ / b

至于在IE中显示侧边距 - 它看起来像是

用浮点数定义它们 - 这可能会导致它们在显示时覆盖

borderWrapper的边框。您可能想要

尝试添加保证金 - 看看您是否可以稍微提取它们。


我不能保证任何这些都会有所帮助，但至少在我修理它的时候，我会开始。另外，我会努力摆脱

条件定义（但我可以理解为什么它们可能是必需的
。）


希望'至少有一些帮助...

Well, I can see no problems in FF 1.5, but Netscape and opera both show
the gap you describe for firefox. I find it interesting that the gap is
the same size as the gap you define in the conditional IE statement.

IE 6 shows the borders missing on the sides, about in the area you
describe - but on my browser, it loads that way and stays that way. And
it has nothing to do with where the page border is.

I don''t know if this will help, or how much - but I have noticed that
leaving off the unit in FF tends to cause issues, and you have done
exactly this on a number of your paddng and margin definitions -
basically, all the ''0'' ones. It may not even be relevant, but I would
start there.

As for the display of the side margins in IE - it looks like you are
defining them with floats - that is probably causing them to overlay
the border of contentWrapper when they''re displayed. You might want to
try adding a margin - see if you can pull them in a bit.

I can''t promise any of that will help, but that''s at least where I
would start if I were fixing it. Also, I would endeavor to get rid of
the conditional definitions (but I can understand why they may be
necessary).

Hope that''s at least SOME help...

嘿，Tony，


我非常欣赏这一点。我知道css-discuss列表是

高音量;但是我想我可能已经有了b / b< em>一些< / em>一周左右的反应。好吧。


我很担心FF 1.0.7的差距，因为FF

1.5渗透可能还是那么低。我知道Netscape是一个

基于Gecko的浏览器，以及任何功能。导致差距可能由FF lt 1.5和Netscape共享。但是，我并非亲自了解Opera在浏览器代码基因库中的位置。


边界不关心我一样多，但我不想回避IE

用户，如果一个相对容易的修复工作。


再次感谢。这至少是一个方向。我通过Firefox Bugzilla数据库尝试了管道

的东西，但事实证明

非常令人生畏，因为幻像间距的问题很通用。

Daniel

Hey, Tony,

I very much appreciate this. I know the css-discuss list is
high-volume; but I''d figured that I would probably have had
<em>some</em> kind of response in a week or so. Oh well.

I''m a little concerned that the gap is there for FF 1.0.7 given that FF
1.5 penetration is probably kind of low still. I know Netscape is a
Gecko-based browswer, and whatever "feature" is causing the gap might
be shared by FF lt 1.5 and Netscape. However, I''m not personally to
aware of Opera''s place in the browser code gene pool.

The borders don''t concern me quite as much, but I don''t want to shun IE
users if a relatively easy fix works.

Thanks again. This is at least a direction to head. I tried plumbing
through the Firefox Bugzilla database for something, but that proved
pretty daunting as an issue with phantom spacing is kind of generic.

Daniel

所以，好吧，我尝试为每次测量提供单位，没有什么好的
影响。如果有的话，它似乎稳定了IE 6'

边界的渲染，这样他们大部分时间都没有改变。我已经玩了几个不同的浮动元素宽度，边距，
以及填充元素上的填充值
，但无济于事。我知道我正用我的轻木棒砍掉我的balsa wood并期待漂亮的东西。


有没有人注意到IEunrendering滚动边框？


我可能需要获得FF 1.5，但我希望这在1.0.7

仍能正常工作。然后有Netscape和Opera问题，我没有这个问题。

So, well, I tried providing units for every measurement, to no great
affect. If anything, it seemed to stabilize IE 6''s rendering of the
borders, such that they''re mostly messed up without changing. I''ve
played with a few different values of floated-element width, margin,
and padding on the containing element, to no avail. I know I''m hacking
at my balsa wood with a machette and expecting something pretty.

Has anyone else ever noticed IE "unrendering" borders as you scroll?

I might need to get FF 1.5, but I want this to work properly in 1.0.7
still. And then there are the Netscape and Opera issues, neither of
which I have.

这篇关于奇数边框+填充行为：跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！