当前位置： 文江博客话题详情

IE 中这个表格格式有什么问题？

发布于 2024-09-07 03:55:14 字数 1543 浏览 5 评论 0原文

这种情况只发生在 IE 中，当我将标记为“中间表”的表放入此 HTML 中时，父表的对齐方式会变得混乱，并且第一个 TD 上的 width="250" 似乎会被忽略。 （选择框应从距离页面左侧 250 像素处开始，但事实并非如此。删除标有“中间表格”的表格，对齐方式将按预期进行。为什么会发生这种情况？

<!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" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
 <tr style="height: 50px;">
  <td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
  <td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf:  </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
 </tr>
 <tr id="row_container" align="left" valign="top">
  <td colspan="2">
<!-- middle table -->
   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td style="width: 250px;" align="left" valign="top" id="nav_container"></td>
     <td style="width: 25px;" align="left" valign="top"></td>
     <td id="dat_container" style="width:1000px;" align="left"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr style="height: 50px;">
  <td></td>
  <td></td>
 </tr>
</table>
</body>
</html>
原文

This is only happening in IE, when I place the table labelled -- middle table -- into this HTML, the alignment of the parent table gets messed up and the width="250" on the first TD gets ignored it seems. (The select box should start at 250 pixels from the left of the page, however it doesn't. Remove the table labelled -- middle table - and the alignment works as it should. Why is this happening?

<!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" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
 <tr style="height: 50px;">
  <td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
  <td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf:  </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
 </tr>
 <tr id="row_container" align="left" valign="top">
  <td colspan="2">
<!-- middle table -->
   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td style="width: 250px;" align="left" valign="top" id="nav_container"></td>
     <td style="width: 25px;" align="left" valign="top"></td>
     <td id="dat_container" style="width:1000px;" align="left"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr style="height: 50px;">
  <td></td>
  <td></td>
 </tr>
</table>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论（4）

帅气称霸 2024-09-14 03:55:14

根据 W3C 验证器，您的 XHTML 包含六个错误。更具体地说，被忽略的 width="250" 属性无效。无效标签的主要问题是，您不再获得连贯的跨浏览器渲染，因为浏览器被迫使用变通办法。首先尝试解决这个问题。作为一般规则，布局应通过 CSS 完成。

According to the W3C Validator, your XHTML contains six errors. More specifically, the width="250" attribute that gets ignored is not valid. The main problem with invalid tags is that you no longer get a coherent cross-browser rendering since browsers are forced to use workarounds. Try to fix this first. As a general rule, layouts should be accomplished via CSS.

回复 原文
淤浪 2024-09-14 03:55:14

您正在采用一种极其古老的网站布局方法。使用表格来布局网站中本质上不是表格的任何内容是一个绝对禁忌。您应该使用符合标准的 CSS 和 HTML（DIV、Span 等）来布局您的网站。每个浏览器对表格的处理方式不同，要获得一致的、实用的、易于维护的布局可能非常困难。

我不想这么说，但我真的无法让自己帮助您使用表格解决当前的问题。我唯一的答案是重新启动，使用 DIV 标签和 CSS，并享受符合标准的布局的幸福。 （不要使用 style="" 属性来设置所有 CSS，而是使用正确的样式表。）

You are taking an extremely archaic approach to web site layout. Using tables to lay out anything in a web site that is not tabular in nature is a MASSIVE no-no. You should be using standards-compliant CSS and HTML (DIVs, Spans, etc.) to lay your site out. Tables are treated differently by each browser, and it can be extremely difficult to get a consistent, functional, easy to maintain layout with them.

I hate to say it, but I really can't bring myself to help you resolve your current problem using tables. My only answer is restart, use DIV tags and CSS, and enjoy the bliss that is standards-compliant layout. (Do NOT use the style="" attribute to set all your CSS, use a proper stylesheet.)

回复 原文
巴黎夜雨 2024-09-14 03:55:14

1000+250+25>第1250章

你的中间桌子太宽了

1000 + 250 + 25 > 1250

your middle table is too wide

回复 原文
影子的影子 2024-09-14 03:55:14

总而言之，简短的答案是……因为 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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

请注意，第一行中的第二个 td 没有指定宽度。如果你知道宽度应该是多少，那么你可以像这样解决这个问题：

<!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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td width="750" style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

我确实同意其他人所说的，CSS是正确的方法，但这不是你的问题。希望这有帮助。

When all is said and done the short answer is...because IE can be very retarted. That said here is a work around:

First you issue simplified is this:

<!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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

Notice your 2nd td in your 1st row has no width specified. If you know what the width should be then you can work around this issue like so:

<!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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td width="750" style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

I do agree with what others have said, that css is the way to go, but that was not your question. Hopefully this helps.

回复 原文
~没有更多了~

关于作者

银河中√捞星星

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

杨绘峰

文章 0 评论 0

听闻余生

文章 0 评论 0

谜兔

文章 0 评论 0

xiaotwins

文章 0 评论 0

你说

文章 0 评论 0

若能看破又如何

文章 0 评论 0

更多

友情链接

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