IE CSS bug:表边框显示div带可见性:hidden,position:absolute [英] IE CSS bug: table border showing div with visibility: hidden, position: absolute
问题描述
我在一个页面上有一个< div>
code> visibility:hidden; position:absolute 。问题是,如果隐藏的< div>
包含一个使用 border-collapse:collapse
有边框设置在单元格上,该边框仍然显示通过IE上的隐藏< div>
。
I have a <div>
on a page which is initially hidden with a visibility: hidden; position: absolute
. The issue is that if a <div>
hidden this way contains a table which uses border-collapse: collapse
and has a border set on it cells, that border still shows "through" the hidden <div>
on IE.
通过运行下面的代码在IE6或IE7自己尝试这个。您应该会看到一个白页,但会看到:
Try this for yourself by running the code below on IE6 or IE7. You should get a white page, but instead you will see:
由于这种情况发生在IE而不是其他浏览器,我假设这是一个IE错误。一种解决方法是添加将覆盖边框的以下代码:
Since this is happening on IE and not on other browsers, I assume that this is an IE bug. One workaround is to add the following code which will override the border:
.hide table tr td {
border: none;
}
我想知道:
- 这是已知的IE错误吗?
- 是否有更优雅的解决方案/解决方法?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
/* Style for tables */
.table tr td {
border: 1px solid gray;
}
.table {
border-collapse: collapse;
}
/* Class used to hide a section */
.hide {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="hide">
<table class="table">
<tr>
<td>Gaga</td>
</tr>
</table>
</div>
</body>
</html>
推荐答案
移动渲染屏幕,这屏蔽我们对此类IE的错误。在上面的例子中,这意味着你将 hide
类的CSS定义为:
The solution I found consists in adding a top/left to move the rendering off-screen, which shields us against IE bugs of this sort. In the above example, this means that you would define the CSS for the hide
class as:
.hide {
visibility: hidden;
position: absolute;
top: -10000px;
left: -10000px;
}
详细说明:在IE上显示表格边框的解决方法
这篇关于IE CSS bug:表边框显示div带可见性:hidden,position:absolute的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!