Firefox CSS显示问题 [英] Firefox CSS display problem
问题描述
我还在努力通过CSS盒子模型做无表格
布局。感谢此前所有曾帮助过的人;我正在制作
进展但仍然遇到问题。
这个网站*几乎*工作正常;它在IE6和
Opera中看起来很好，但顶部< div>在Firefox上无法正确显示。
页面位于 http：// dianewilson.us/buffy/
页面顶部是< div>定义如下：
#header {
填充：0;
保证金：0;
宽度：100％;
背景颜色：黑色;
clear：both;
}
其他ID样式定义为在此< div>中使用。
那些< div>'也设置了黑色的背景颜色，还有一些
包含黑色背景的图像。但是，问题
在左侧图像下方变得明显，如果窗口足够宽，也会在图像之间显示
。
问题：背景颜色没有填充Firefox
（或在Safari上，虽然我的Safari是后备级别的）。
< div>里面的区域< div id = header> *正确填充（也为背景颜色设置为
：黑色）。
此外，< div>之上还有一个间隙。在Firefox上。
有关如何修复的任何建议吗？
Diane
I''m still working my way through the CSS box model to do tableless
layout. Thanks to all here who have helped previously; I''m making
progress but still running into issues.
This site is *almost* working correctly; it looks fine in IE6 and
Opera, but the top <div> does not display correctly on Firefox.
The page is at http://dianewilson.us/buffy/
The top of the page is a <div> defined as follows:
#header {
padding: 0;
margin: 0;
width: 100%;
background-color: black;
clear: both;
}
Additional id styles are defined for use inside this <div>.
Those <div>''s also set background color of black, and some
contain images with black background. However, the problem
becomes evident below the left-side image, and also between
the images if the window is wide enough.
The problem: the background color does not fill on Firefox
(or on Safari, although my Safari is back-level). The
<div> areas inside <div id=header> *do* fill properly (also
set for background-color: black).
Also, there is a gap above the <div> on Firefox.
Any suggestions on how to fix?
Diane
推荐答案
Diane Wilson< di *** @ firelily.com>写道：
Diane Wilson <di***@firelily.com> wrote:
这个网站*几乎*工作正常;在IE6和Opera中它看起来很好，但顶部< div>在Firefox上无法正确显示。
页面位于 http://dianewilson.us/ buffy /
This site is *almost* working correctly; it looks fine in IE6 and
Opera, but the top <div> does not display correctly on Firefox.
The page is at http://dianewilson.us/buffy/
为div＃header定义一个194px的高度，包含图像的div是
浮动所以它被删除从流程开始，因此div＃header'的高度
崩溃。
-
Spartanicus
Define a 194px height for div#header, the div containing the image is
floated so it is removed from the flow, hence the div#header''s height
collapses.
--
Spartanicus
文章
< kg ************************** ******@news.spartanic us.utvinternet.ie>，
in*****@invalid.inva 盖子说...
Diane Wilson< di *** @ firelily.com>写道：
Diane Wilson <di***@firelily.com> wrote:
这个网站*几乎*工作正常;在IE6和Opera中它看起来很好，但顶部< div>在Firefox上无法正确显示。
页面位于 http://dianewilson.us/ buffy /
This site is *almost* working correctly; it looks fine in IE6 and
Opera, but the top <div> does not display correctly on Firefox.
The page is at http://dianewilson.us/buffy/
为div＃header定义一个194px的高度，包含图像的div被浮动，因此它被从流中移除，因此div＃标题的高度
崩溃。
Define a 194px height for div#header, the div containing the image is
floated so it is removed from the flow, hence the div#header''s height
collapses.
ohhhh kaaayyyyy
我必须达到200px甚至更高黑色区域的底部边缘
在页面上，但它确实有效。谢谢。
现在为什么这样的确如此*黑客*？
Diane
ohhhh kaaayyyyy
I had to go to 200px to even up the bottom edge of the black area
across the page, but it does work. Thanks.
Now why, exactly, does that feel like such a *hack*?
Diane
Diane Wilson写道：
Diane Wilson wrote:
我不得不在200px到达整个页面的黑色区域的底部边缘，但它确实工作。谢谢。
因为#logo和#pageheaer有不同的保证金值。
为什么这两个图像包含在< div>中无论如何，每一个？相当不必要的是
。将所有内容复制到#header #nav p中后到#header
＃nav，将整个标题改为此（修剪无关的东西）：
< div id =" header" >
< p id =" nav">
< a href =" ./ index.aspx"> Home< / a>& ;
< a href =" ./ intro.aspx">简介< / a>& nbsp;
< a href =" ./schedule.aspx">Schedule</a>
< a href =" ./ notes.aspx"> Notes< / a>
< / p>
< img src =" ./ unitarian.jpg" alt =" The Unitarian Slayer"
< img src =" ./ banner.jpg" ALT =" ">
< / div>
没有更多的对齐问题。
现在为什么，确切地说，这感觉到了喜欢这样的*黑客*？
I had to go to 200px to even up the bottom edge of the black area
across the page, but it does work. Thanks.
Because #logo and #pageheaer have different margin values.
Why are the two images wrapped in a <div> each, anyway? It is rather
unnecessary. After copying everything in "#header #nav p" to "#header
#nav", change the whole header to this (extraneous stuff pruned):
<div id="header">
<p id="nav">
<a href="./index.aspx">Home</a>
<a href="./intro.aspx">Intro</a>
<a href="./schedule.aspx">Schedule</a>
<a href="./notes.aspx">Notes</a>
</p>
<img src="./unitarian.jpg" alt="The Unitarian Slayer">
<img src="./banner.jpg" alt=" ">
</div>
No more alignment problems.
Now why, exactly, does that feel like such a *hack*?
因为你不明白它是如何运作的，蚱蜢。
-
jmm dash list（at）sohnen-moe（dot）com
（删除电子邮件的.AXSPAMGN）
Because you do not understand how it works yet, grasshopper.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
这篇关于Firefox CSS显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
