< HR> IE6中的样式Bug [英] <HR> Style Bug in IE6
问题描述
看起来IE6中有一个非常严重的CSS错误
（v6.0.2800.1106）。下面的HTML经过验证，STRICT HTML 4.01和
渲染，就像我在Opera，FrontPage和Netscape中所期望的那样。
出于某种原因，有相邻的
规则之间的一个恼人的垂直间隙并没有消失。这看起来好像IE6不正确
将保证金设置为某个任意值。
有谁知道这是否是MS的已知错误？如果你知道一个，
发布相关的错误ID。 （如果有一个更好的地方跟踪已知的
IE6错误，请告诉我。）
更好的是，如果有人知道一个解决方法（除了臭名昭着的
1px GIF），请发布！我不是在寻找支持
所有浏览器的东西，只是所有HTML 4.1
兼容的浏览器。我知道没有任何浏览器可以完全支持HTML 4.01 STRICT，但是适用于IE6，Opera7和
Mozilla 1.x的黑客是合理的。
试试这段代码：
---------< snip> ----------
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/ strict.dtd">
< html>
< head>
< meta http -equiv = QUOT;内容类型" content =" text / html;
charset = windows-1252">
< title>& lt; hr& gt;测试< / title>
< style type =" text / css">
<！ -
hr {
保证金：自动;
text-align：center;
宽度：80％;
}
..redrule-1 {
border：none;
border-bottom：
1px solid red;
}
..redrule-2 {
border：none;
身高：1px;
颜色：红色;
背景颜色：红色;
}
- >
< ; / style>
< / head>
< body>
< p>
这是一系列紧凑的& lt; hr& gt;'s：
< / p>
< hr>
< hr class =" redrule-1">
< hr>
< p>
这是'
表中的同一系列紧密包装& lt; hr& gt;'：
< / p>
< table style =" width：100％;">
< tr>
< td>
< hr>
< hr class =" redrule-1">
< hr>
< / td>
< / tr>
< / table>
< p>
这是一系列紧凑的& lt; hr& gt;'s：
< / p>
< hr>
< hr class =" redrule-2">
< hr>
< p>
这是'
表中的同一系列紧密包装& lt; hr& gt;'：
< / p>
< table style =" width：100％;">
< tr>
< td>
< hr>
< hr class =" redrule-2">
< hr>
< / td>
< / tr>
< / table>
< ; / body>
< / html>
Mark Moore写道：
看起来就像在IE6中有一个非常严重的CSS错误
* A * bug？你认为只有一个？多么古怪。
相邻规则之间存在令人讨厌的垂直差距，而且不会消失。这似乎是IE6错误地将
边距设置为某个任意值。
可以。你有谷歌的IE / Win css错误吗？你想出了什么？
有谁知道这是否是MS的已知错误？如果你知道一个，
发布相关的错误ID。
嗯？从什么时候开始MS公开追踪错误？
试试这段代码：
编号而是发布网址。并且不要交叉发布，除非它真的要求b $ b。在这种情况下，ciwas是正确的组，所以留下ciwah
。当你交叉发帖时，请设置跟进。 （我已将它们设为
到ciwas。）
-
Brian（删除.invalid到给我发电子邮件）
http://www.tsmchughs.com/
Mark，
1.确切地说......这是什么意思
hr {margin：auto;确切地说？
据我所知CSS 2.1没有说什么
关于什么margin-top：auto应该是。
（可能是规格中的错误）
在这种情况下，UA可以自由选择任何合适的价值。
2. HRs， TABLE和IMG是特殊情况，因为它们的传统形状和
渲染行为无法在纯CSS中定义。
问候，
Andrew Fedoniouk。
http://terrainformatica.com
" Mark Moore" <毫安******** @ notlimited.com>在消息中写道
news：13 ************************** @ posting.google.c om ...看起来IE6中有一个非常严重的CSS错误
（v6.0.2800.1106）。下面的HTML经过验证，STRICT HTML 4.01和
渲染，正如我在Opera，FrontPage和Netscape中所期望的那样。
由于某种原因，相邻的
之间存在令人讨厌的垂直间隙/>规则不会消失。这看起来好像IE6错误地将边距设置为某个任意值。
有谁知道这是否是MS的已知错误？如果你知道一个，
发布相关的错误ID。 （如果有更好的地方跟踪已知的IE6错误，请告诉我。）
更好的是，如果有人知道一个解决方案（除了臭名昭着的
1px GIF），请发帖！我不是在寻找支持
所有浏览器的东西，只是所有HTML 4.1
兼容的浏览器。我知道没有任何浏览器完全支持HTML 4.01 STRICT，但是对于IE6，Opera7和Mozilla 1.x这样的黑客行为是合理的。
试试这段代码：
---------< snip> ----------
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv =" Content-Type" content =" text / html;
charset = windows-1252">
< title>& lt; hr& gt;测试< / title>
< style type =" text / css">
<！ -
hr {
margin：auto;
text -align：center;
宽度：80％;
}
.redrule-1 {
border：none;
border-bottom：
1px solid红色;
}
.redrule-2 {
border：none;
身高：1px;
颜色：红色;
背景颜色：红色;
}
- >
< / style>
< / head>
< body>
< p> ;
这是一系列紧密包装的& lt; hr& gt;'：
< / p>
< hr>
< hr class =" redrule-1">
< hr>
< p>
这是同一系列的紧密包装& lt; hr& gt;'s在
表中：
< / p>
< table style =" width：100％;">
< tr>
< ; td>
< hr>
< hr class =" redrule-1">
< hr>
< / td>
< / tr>
< / table>
< p>
这是一系列紧凑的& lt; hr& gt ;'s：
< / p>
< hr>
< hr class =" redrule-2">
< hr>
< p>
这是在
表格中的同一系列紧密包装的& lt; hr& gt;：
< / p>
< table style =" width：100％;">
< tr>
< td>
< hr>
< hr class = redrule-2>
< hr>
< / td>
< / tr>
< / table>
< / body>
< / html>
如果您想要一条像素水平线a la，请使用此选项。统治者
..hr {
保证金：0;
填充：0;
border -top：1px纯红色;
宽度：80％;
身高：0px;
溢出：隐藏;
text-align：center;
}
< div class = hr>< / div>
Andrew Fedoniouk。
http://terrainformatica.com
It looks like there''s a pretty serious CSS bug in IE6
(v6.0.2800.1106). The HTML below is validated STRICT HTML 4.01 and
renders as I would expect in Opera, FrontPage, and Netscape.
For some reason, there''s an annoying vertical gap between adjacent
rules that doesn''t go away. This looks like IE6 is incorrectly
setting the margin to some arbitrary value.
Does anyone know if this is a known bug at MS? If you know of one,
post the related bug ID. (If there''s a better place to track known
IE6 bugs, let me know.)
Better yet, if anyone knows about a work around (besides the infamous
1px GIF), please post! I''m not looking for something that supports
all browsers back to the beginning of time, simply all HTML 4.1
compliant browsers. I know there isn''t any browser that fully
supports HTML 4.01 STRICT, but a hack that works with IE6, Opera7, and
Mozilla 1.x as reasonable.
Try this code:
---------<snip>----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title><hr> Test</title>
<style type="text/css">
<!--
hr {
margin: auto;
text-align:center;
width: 80%;
}
..redrule-1 {
border: none;
border-bottom:
1px solid red;
}
..redrule-2 {
border: none;
height: 1px;
color: red;
background-color: red;
}
-->
</style>
</head>
<body>
<p>
Here''s a series of tightly packed <hr>''s:
</p>
<hr>
<hr class="redrule-1">
<hr>
<p>
Here''s the same series of tightly packed <hr>''s inside a
table:
</p>
<table style="width: 100%;">
<tr>
<td>
<hr>
<hr class="redrule-1">
<hr>
</td>
</tr>
</table>
<p>
Here''s a series of tightly packed <hr>''s:
</p>
<hr>
<hr class="redrule-2">
<hr>
<p>
Here''s the same series of tightly packed <hr>''s inside a
table:
</p>
<table style="width: 100%;">
<tr>
<td>
<hr>
<hr class="redrule-2">
<hr>
</td>
</tr>
</table>
</body>
</html>
Mark Moore wrote:
It looks like there''s a pretty serious CSS bug in IE6
*A* bug? You think there''s only one? How quaint.
there''s an annoying vertical gap between adjacent rules that
doesn''t go away. This looks like IE6 is incorrectly setting the
margin to some arbitrary value.
Could be. Did you Google for IE/Win css bugs? What did you come up with?
Does anyone know if this is a known bug at MS? If you know of one,
post the related bug ID.
Huh? Since when does MS publicly track bugs?
Try this code:
No. Instead, post a url. And don''t cross-post unless it''s really
called for. In this case, ciwas is the right group, so leave ciwah out
of it. And when you cross-post, please set followups. (I''ve set them
to ciwas.)
--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Hi, Mark,
1. To be precise... what does it mean yours
hr { margin: auto; } exactly ?
As far as I know CSS 2.1 does not say anything
about what margin-top: auto should be.
(Probably a bug in the specification)
In such circumstances UA is free to choose any suitable value.
2. HRs, TABLEs and IMGs are special cases as their traditional shapes and
rendering behavior cannot be defined in pure CSS.
Regards,
Andrew Fedoniouk.
http://terrainformatica.com
"Mark Moore" <ma********@notlimited.com> wrote in message
news:13**************************@posting.google.c om...It looks like there''s a pretty serious CSS bug in IE6
(v6.0.2800.1106). The HTML below is validated STRICT HTML 4.01 and
renders as I would expect in Opera, FrontPage, and Netscape.
For some reason, there''s an annoying vertical gap between adjacent
rules that doesn''t go away. This looks like IE6 is incorrectly
setting the margin to some arbitrary value.
Does anyone know if this is a known bug at MS? If you know of one,
post the related bug ID. (If there''s a better place to track known
IE6 bugs, let me know.)
Better yet, if anyone knows about a work around (besides the infamous
1px GIF), please post! I''m not looking for something that supports
all browsers back to the beginning of time, simply all HTML 4.1
compliant browsers. I know there isn''t any browser that fully
supports HTML 4.01 STRICT, but a hack that works with IE6, Opera7, and
Mozilla 1.x as reasonable.
Try this code:
---------<snip>----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title><hr> Test</title>
<style type="text/css">
<!--
hr {
margin: auto;
text-align:center;
width: 80%;
}
.redrule-1 {
border: none;
border-bottom:
1px solid red;
}
.redrule-2 {
border: none;
height: 1px;
color: red;
background-color: red;
}
-->
</style>
</head>
<body>
<p>
Here''s a series of tightly packed <hr>''s:
</p>
<hr>
<hr class="redrule-1">
<hr>
<p>
Here''s the same series of tightly packed <hr>''s inside a
table:
</p>
<table style="width: 100%;">
<tr>
<td>
<hr>
<hr class="redrule-1">
<hr>
</td>
</tr>
</table>
<p>
Here''s a series of tightly packed <hr>''s:
</p>
<hr>
<hr class="redrule-2">
<hr>
<p>
Here''s the same series of tightly packed <hr>''s inside a
table:
</p>
<table style="width: 100%;">
<tr>
<td>
<hr>
<hr class="redrule-2">
<hr>
</td>
</tr>
</table>
</body>
</html>
Use this if you want one pixel horizontal line "a la" ruler
..hr {
margin: 0;
padding: 0;
border-top: 1px solid red;
width: 80%;
height: 0px;
overflow:hidden;
text-align:center;
}
<div class=hr></div>
Andrew Fedoniouk.
http://terrainformatica.com
这篇关于< HR> IE6中的样式Bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
