Firefox 和 IE - Firefox 处理表内的 <span>（html 和 css）答案

【问题标题】：Firefox and IE - Firefox handling of <span> inside tables (html and css)Firefox 和 IE - Firefox 处理表内的 <span>（html 和 css）
【发布时间】：2011-01-30 21:22:43
【问题描述】：

我很难让 span 标签在表格中正常工作。看起来好像整个 span 标记被忽略了，它在 Firefox 中的 table 标记之间的任何位置定义，但在 IE 中这显示正确。

也许我遗漏了一些东西，但我创建了一个小示例 CSS 和 html 文件，在 Firefox 和 IE 中显示不同。希望有人能告诉我为什么会这样，或者我可以如何重新排列 html 以解决 Firefox 中的问题。

---main.css---

.class1 A:link {color:#960033; text-decoration: none}
.class1 A:visited {color:#960033; text-decoration: none}
.class1 A:hover {color:#0000FF; font-weight: bold; text-decoration: none}
.class1 A:active {color:#0000FF; font-weight: bold; text-decoration: none}

.class2 A:link {color:#960033; text-decoration: none}
.class2 A:visited {color:#960033; text-decoration: none}
.class2 A:hover {color:#0000FF; text-decoration: none}
.class2 A:active {color:#0000FF; text-decoration: none}

---test.htm---

<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<span class="class1">
<BODY>

<table><tr><td>
---Insert Hyperlink---<br>
</td></tr>

</span><span class="class2">

<tr><td>
---Insert Hyperlink---<br>

</td></tr></table>

</span>
</BODY>
</HTML>

【问题讨论】：

validator.w3.org
天哪，真是一团糟……很难写出这么糟糕的标记。我特别在 (!) 之前开始并在 ! 之前结束的

标签： html css firefox html-table

【解决方案1】：

你不能有一个简短的答案，只有一个<tr>

<body> 应该包含你的元素，除了<html> 应该包含<body>

你可能追求的是这个：

<html>
<head>
  <title>Title Page</title>
  <style type="text/css">@import url("/css/main.css");</style>
</head>
<body>
  <span class="class1">
    <table>
      <tr>
        <td>---Insert Hyperlink---<br></td>
      </tr>
    </table>
  </span>
  <span class="class2">
    <table>
      <tr>
        <td>---Insert Hyperlink---<br></td>
      </tr>
    </table>
  </span>
</body>
</html>

要记住的另一件事，没有理由使用这些跨度（表格可以有一个类）或那些表格（如果您只使用单个单元格，请使用 <div> 或其他东西），一个简单的 @987654327 @ 可能会做你想做的一切：

<div class="class2">
   ---Insert Hyperlink---
</div>

【讨论】：

尼克说了什么。从技术上讲，IE 也应该在那里忽略它。将其包裹在 <tr><td></td></tr> 中，如果需要，您可以随时使用 td 的 colspan 属性。

【解决方案2】：

您不能将span 直接包含在table 中。基本上，表格中的文本必须包含在单元格中（td 或 th），而这些单元格又必须包含在行中（tr），而行又应包含在@987654329 中@、thead 或 tfoot 元素，然后可以包含在 table 中。从 HTML5 开始，tbody 可以正式隐含（而以前这只是浏览器所做的事情，尽管之前的规范要求在 table 和 tr 之间做一些事情）。

HTML validation service 对于处理这类事情很有用。

【讨论】：

【解决方案3】：

很抱歉，您的 HTML 是一团糟。 IE 会显示跨度的原因可能是浏览器大战的残余，当时 Netscape 和 Microsoft 不断地相互争夺谁可以理解最糟糕的 HTML。 <table>-tag 中允许的唯一标签是 <legend>、<colgroup>、<tbody>、<tfoot>、<thead> 和 <tr>。如果您希望 <span> 可见，请将其放在 <td> 内 <tr>

类似：

<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<BODY>

<table>
  <tr>
    <td>
     ---Insert Hyperlink---<br>
    </td>
  </tr>

  <tr>
    <td>
      <span class="class2"></span>
       ---Insert Hyperlink---<br>
    </td>
  </tr>
</table>
</BODY>
</HTML>

另外，决定您是要在标签中使用小写还是大写字符。它使您更容易遵循您的代码。

【讨论】：

【解决方案4】：

我认为在表格中放置 SPAN 应该没有问题假设它在单元格中
确保表格本身的格式正确，包含正确的行和单元格。即使表格损坏，IE 也可能正在渲染表格

【讨论】：

【解决方案5】：

你不能像这样把类直接放在 tr-tag 上吗：

<table><tr class="class1" ><td>
---Insert Hyperlink---<br>
</td></tr>

请注意您的代码是嵌套的，因此请尝试将类直接放在标签上

【讨论】：

【解决方案6】：

你的标签嵌套是一团糟..

你不能拥有

<tag1>
 <tag2>
</tag1>
 </tag2>

应该是的

<tag1>
 <tag2>
 </tag2>
</tag1>

你也在tr之间使用span，这是不允许的

【讨论】：

【解决方案7】：

这只是无效的 HTML。你不能只打开和关闭随机标签……试试这样的：

<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<BODY>

<table><tr><td>
<span class="class1">
---Insert Hyperlink---<br>
</span>
</td></tr>


<tr><td>
<span class="class2">
---Insert Hyperlink---<br>
</span>
</td></tr></table>


</BODY>
</HTML>

【讨论】：

【解决方案8】：

这里有两个问题：第一个跨度在体外开始，而跨度只能在体内。你也不能结束/开始 table 和 tr 标签之间的跨度。

您应该使用 tbody 标记来分隔表格的各个部分：

<HTML>
<HEAD>
    <title>Title Page</title>
    <style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<BODY>

    <table>

        <tbody class="class1">

            <tr><td>
            ---Insert Hyperlink---<br>
            </td></tr>

        </tbody>
        <tbody class="class2">

            <tr><td>
            ---Insert Hyperlink---<br>

            </td></tr>
        </tbody>
    </table>


    </BODY>
</HTML>

【讨论】：