Jquery html() 错误?
我在 IE8 中遇到错误,但在 firefox、chrome 和 safari 中可以正常工作。这是我的 HTML 代码,
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
您可以在此处查看正在运行的代码 - http://evermight.com/jquerybug/index.html html
在IE8中,为什么当我按下“按下”按钮时,黑色背景的h2变成白色背景而不是保持黑色背景?当我删除按钮 onclick 事件处理程序的 html('
和
之间的空白区域时,黑色 bakground 会按预期持续存在。为什么会出现空白区域影响 IE8 中 header 标签的 CSS 外观?
I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html('
and <header>
of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这不是 jQuery 错误——它是 IE 与 HTML5shiv 错误的结合。或者您可以将其称为一般的 IE bug。
如果你尝试你的代码,替换
为
你会发现它工作正常,即使有前导空格。
如果您阅读 html5shiv 网站上的问题页面这是一个已知错误< /a> (动态创建的 HTML5 元素,不设置样式)。
您还可以阅读此 stackoverflow发布以获取有关当前情况的更多信息以及一些解决方法建议。
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
with
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
你需要innershiv。
You need the innershiv.