Question

我在下面有示例html。它有自定义的html标签，在将其发送到浏览器之前我将其替换为某些值。如果我对这些标签没有任何价值，我什么都不做。它在IE7 / 8/10 / FF和chrome中都很好用。 但不是在IE9中

某些<td>会自动增加或减少其宽度。当我通过Web Developer Tools更改Document Mode = IE9标准时，我看到了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .id {width:150px;}
        .text{width:450px;}
    </style>
</head>
<body>
    <table id="test">
        <tr><td class="id">11</td><td class="text">One</td></tr>
         <tr><td class="id">22</td><td class="text">Two</td></tr>
         <tr><td>33</td><td class="text">Three</td ></tr>
        <TEST/>
        <HELLOWORLD/>
        <tr><td>44</td><td class="text">Four</td></tr>
    </table>
</body>
</html>

当前修复： 如果我没有任何价值，我会在发送给客户端之前将其替换为服务器端的空字符串。

问题：不知道为什么这种情况只发生在IE9中，或者有其他比我目前更好的解决方案。

注意：这只是我实际生产代码的小版本，但它复制了问题。在这里，它减小了宽度，但在我的生产代码中，它增加了一些<td>的宽度。 JSFiddle here。

Answer 1

我知道它有点晚了...但我现在正在研究自定义标签，我想加2美分。

自定义标记需要在其名称中包含连字符（＆＃39; - ＆＃39;）。有效名称为<hello-world />或<menu-box></menu-box>。

有关规范，请参阅http://w3c.github.io/webcomponents/spec/custom/。

Answer 2

简短的回答是：不要使用自定义标签;它们不是一个好主意，如果您使用它们，您将遇到跨浏览器问题。（有一些正式的规范允许你使用它们，但它们只能在最新的浏览器版本中使用）

IE8及更早版本根本不支持自定义标签。您报告IE7 / 8正在运行，因此我猜他们将完全忽略您的自定义元素。

IE9知道HTML5，因此它识别出它不知道的标签可能有效，所以它确实允许它们，但仍然在HTML规则范围内。

这就是让你失望的原因：HTML的规则规定，作为<table>的孩子所允许的唯一元素是<tbody>，<thead>，<tfoot>和{{ 1}}。其他任何事都是非法的。因此，您的元素被视为无效的HTML，从而导致渲染问题。

IE9和IE10之间的区别可能在于它们处理无效HTML的程度。

解决方案就是你正在做的事情 - 你的HTML中没有这些元素。无效的HTML总是会给你渲染问题，并且没有充分的理由让HTML无效。

Answer 3

以防这对任何人都有帮助。 IE9的自定义/任意标签如下所示：

<%tag>

我主要在测试XSS时使用它：

<%xss onmouseover=alert()>click here!

将文字悬停在＃34;点击此处＆＃34;给出一个弹出窗口。也许这个信息对开发人员有所帮助。

IE 9不喜欢自定义html标签

3 个答案: