Jquery html() 错误?

发布于 2024-11-09 02:40:53 字数 1183 浏览 0 评论 0原文

我在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

沉默的熊 2024-11-16 02:40:53

这不是 jQuery 错误——它是 IE 与 HTML5shiv 错误的结合。或者您可以将其称为一般的 IE bug。

如果你尝试你的代码,替换

<header> .... </header>

<div class='header'> .... </div>

你会发现它工作正常,即使有前导空格。

如果您阅读 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

<header> .... </header>

with

<div class='header'> .... </div>

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.

原谅我要高飞 2024-11-16 02:40:53

你需要innershiv

You need the innershiv.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文