CSS问题：IE，Firefox，Opera的外观不同 [英] CSS problem: Different appearance in IE, Firefox, Opera
问题描述
http://mysite.verizon.net/gdguarino/indexnew.htm
这不是一个高优先级的网站，只是我的一些照片在整个
年。上面的地址是新主页的实验。我的
预期布局可以在Firefox或Opera中看到。在IE中，幻灯片
不填充网格。有没有人知道为什么？
CSS如下。 DIV.slide是相关的位。在此先感谢。
格雷格
BODY {
背景：黑色;
}
A {
颜色：#FFFFFF;
text-decoration：none;
}
A：访问{
颜色：＃F0F8FF;
text-decoration：none;
}
A：HOVER {
颜色：＃9999FF;
}
DIV.slide {
身高：182px;
宽度：152px;
边框：1px稳固＃778899;
保证金：10px 10px 10px 10px;
浮动：左;
背景：黑色;
}
P.caption {
margin-top：5px;
margin-bottom：5px;
}
P.captionh {
margin-top：5px;
margin-bottom：30px;
}
..tn {
margin-bottom：0px;
margin-top：0px;
}
..full {
保证金：5px 5px 5px 5px;
背景：黑色无;
边框：1px坚实的黑色;
}
DIV.left {
剩余：10％;
显示：块;
位置：相对;
保证金：10px 10px 10px 10px;
}
DIV.right {
右：10％;
显示：阻止;
头寸：相对;
保证金：10px 10px 10px 10px; < br $>
}
DIV＃skyline1 {
右：200px;
显示：块;
位置：相对;
保证金：-10px 10px -10px 10px;
}
DIV＃skyline2 {
右：200px;
显示：块;
仓位：相对;
保证金：-10px 10px -10px 10px;
}
..spaced {
保证金：10px 10px 10px 10px;
border：1px solid＃778899;
}
http://mysite.verizon.net/gdguarino/indexnew.htm
It''s not a high priority site, just some of my photos throughout the
years. The address above is an experiment for a new home page. My
intended layout can be seen with Firefox or Opera. In IE the "slides"
don''t "fill the grid". Does anyone here know why?
The CSS follows . DIV.slide is the relevant bit. Thanks in advance.
Greg
BODY {
background : black;
}
A {
color : #FFFFFF;
text-decoration : none;
}
A:VISITED {
color : #F0F8FF;
text-decoration : none;
}
A:HOVER {
color : #9999FF;
}
DIV.slide {
height : 182px;
width : 152px;
border : 1px solid #778899;
margin : 10px 10px 10px 10px;
float : left;
background : Black;
}
P.caption {
margin-top : 5px;
margin-bottom : 5px;
}
P.captionh {
margin-top : 5px;
margin-bottom : 30px;
}
..tn {
margin-bottom : 0px;
margin-top : 0px;
}
..full {
margin : 5px 5px 5px 5px;
background : Black none;
border : 1px solid Black;
}
DIV.left {
left : 10%;
display : block;
position : relative;
margin : 10px 10px 10px 10px;
}
DIV.right {
right : 10%;
display : block;
position : relative;
margin : 10px 10px 10px 10px;
}
DIV#skyline1 {
right : 200px;
display : block;
position : relative;
margin : -10px 10px -10px 10px;
}
DIV#skyline2 {
right : 200px;
display : block;
position : relative;
margin : -10px 10px -10px 10px;
}
..spaced {
margin : 10px 10px 10px 10px;
border : 1px solid #778899;
}
推荐答案
Greg G schreef：
Greg G schreef:
DIV.slide {
高度：182px;
宽度：152px;
边框：1px坚固＃778899;
保证金：10px 10px 10px 10px;
浮动：左;
背景：黑色;
}
DIV.slide {
height : 182px;
width : 152px;
border : 1px solid #778899;
margin : 10px 10px 10px 10px;
float : left;
background : Black;
}
我认为问题是MSIE的盒子模型：它将边距长度加到宽度为
，所以siv.slide实际上是204像素宽（包括边框）。
现在换另外的东西：
你使用大写的html标签，这是符合xhtml标准的，你放置
a-tags在p-tags之前（层次不一致）。并且你不会关闭div中的
a-tags。
如果你想要你的css工作，先写清洁代码。这需要很多错误。
漂亮的照片'顺便说一句，你的灯很棒！
-
Niek
I think the problem is the MSIE''s boxmodel: it adds the margin-length to
the width, so the siv.slide is actually 204 pix wide (incl. the border).
And now for something completely else:
You use uppercase html-tags, which is nog xhtml-compliant, you place
a-tags before p-tags (hierachy inconsistancy). And you don''t close the
a-tags in the div''s.
If you want your css to work, write clean code first. That takes out a
lot of errors.
Nice photo''s btw, your light is great!
--
Niek
'sNiek schreef：
''sNiek schreef:
我认为问题是MSIE的盒子模型：它将margin-length加到
宽度，所以siv.slide实际上是204像素宽（包括边框）。
I think the problem is the MSIE''s boxmodel: it adds the margin-length to
the width, so the siv.slide is actually 204 pix wide (incl. the border).
那不是当然是174.
-
Niek
thats''t 174 off course.
--
Niek
''sNiek写道：
''sNiek wrote:
'sNiek schreef：
''sNiek schreef:
我认为问题是MSIE的盒子模型：它将边距长度加到宽度上，所以siv.slide是实际上是204像素宽（包括边框）。
I think the problem is the MSIE''s boxmodel: it adds the margin-length to
the width, so the siv.slide is actually 204 pix wide (incl. the border).
那不是174。当然。
thats''t 174 off course.
那个'可能是那''的和当然而不是off course，
和siv.slide很可能是div.slide ;-)
（SCNR :-)）
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
And that''s probably "that''s" and "of course" instead of "off course",
and "siv.slide" is probably "div.slide" ;-)
(SCNR :-) )
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
这篇关于CSS问题：IE，Firefox，Opera的外观不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
