HTML标签的样式属性不考虑宽度的设置

在下面的代码片段中，td标签的宽度百分比属性似乎在Firefox/IE等中被忽略。因此，“密码”和文本框都得到一排，这是浪费空间。是不是有什么错公然与下面的代码片段：HTML标签的样式属性不考虑宽度的设置

<table align="center" width="80%" cellpadding="0" cellspacing="0" class="loginBg"> 
    <asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;"> 
    <tr> 
     <td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%">Username</td> 
     <td style="padding-right:0px;width:70%" align="left"><asp:TextBox id="txtUsername" runat="server" Width="90px" /></td> 
     <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" /> 
    </tr> 
    </asp:Panel> 
</table>

而且，我做的风格一致，因为这是一个非常裸露的页面，只用于填充另一个Web应用程序的iframe。

在此先感谢您的任何提示。

编辑：添加了一些代码来澄清上下文。

编辑2：我删除了asp：Panel和宽度比例似乎现在工作...但只有当iframe或浏览器窗口是300+像素宽。在非常小的浏览器窗口/框架中，它强制两者都是50％。真正bizaree。

来源

2012-02-15 kmarks2

对于我对你的代码作了一些修改：http://jsfiddle.net/28d2A/ – Yogu 2012-02-15 21:40:27

“RequiredFieldValidator”在页面中注入了什么？ – 2012-02-15 21:41:24

@Diodeus输出''标签。 – jrummell 2012-02-15 21:45:18

<asp:RequiredFieldValidator>是不是应该在<td>之一？

编辑：<table>和<tr>之间的<asp:Panel>可能没有帮助。也就是说，你不应该在你的表中有额外的控件/标签，它们不应该在那里。像<asp:Panel>应该包装整个表或在<td>之一。

编辑：简而言之，排列的标签会产生无效的HTML，所以所有的造型投注都关闭。

来源

2012-02-15 21:42:37 codeulike

将此移入不幸的是没有改变任何东西。 – kmarks2 2012-02-15 21:48:35

将什么移入''？ – codeulike 2012-02-15 21:50:58

对不起，我将验证器移动到。我也删除了ASP面板。现在它似乎工作，但只有当包含浏览器窗口或iframe是> 300px。当它是150px左右时，两个都会得到50％。 – kmarks2 2012-02-15 21:54:07

首先，将您的验证器放入<td>。

其次 - 检查其他行的宽度设置'<td>样式 - 您可能有冲突。

如果您将textbox取出，会发生吗？

来源

2012-02-15 21:43:21 Chains

我不包含任何样式表，我只是在那里进行内联。也谢谢你推荐删除tb。在我删除了tb之后，只是放入了文本，同样的问题。 – kmarks2 2012-02-15 21:45:56

好吧 - 检查你的其他行'“内联”的冲突。 :-)（风格是一种风格，不管它是存储在表单中还是内联等） – Chains 2012-02-15 21:50:56

看来，ie和表格宽度不能很好地结合在一起。

你可以做什么来强制你的表的最小宽度是添加一个额外的行到你的表，跨越所有列的宽度的最小尺寸，你想要的。然后，这将执行您的td百分比，当浏览器调整大小或您的iframe很小。

像这样：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
<style> 
    .min500 
    { 
     width: 500px; 
     height: 1px; 
    } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <table align="center" border="1" cellpadding="0" cellspacing="0" class="loginBg"> 
     <asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">  
      <tr>  
       <td colspan="2"> 
        <div class="min500"></div> 
       </td> 
      </tr> 
      <tr> 
       <td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%;"> 
        Username 
       </td>   
       <td style="padding-right:0px;width:70%;" align="left">&nbsp; 
       <asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>   
       <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />  
      </tr> 
     </asp:Panel> 
    </table> 
</form>

来源

2012-02-16 09:58:06

今天晚些时候我会试试这个。这看起来很有希望。 – kmarks2 2012-02-16 16:31:56

我在ASP.NET中的重大问题与此有关。在表中使用colgroup标记会导致从没有该组的IIS返回页面源。正如你可能猜测的那张桌子刚刚做了它想要的那样。在确定问题可能一直需要colgroup上的runat ='server'属性，因为它在父表上时，我遇到了no compile situation。最终对我起作用的是将所需单元宽度放在第一行标记上的典型混杂。问题：表格的第一个实际行具有跨越列的单元，因此需要虚拟行。现在，如何隐藏它？

设置表有固定的宽度和布局风格：

style="width: 800px; table-layout: fixed"

然后用第一行是这样的，似乎工作，加起来就是你的表格宽度（使用宽度最少的代码量）：

<tr id="DummyTableRow" style="line-height: 0px" runat="server"> 
    <td style="width: 200px; border: none">&nbsp;</td> 
    <td style="width: 200px; border: none">&nbsp;</td> 
    <td style="width: 400px; border: none">&nbsp;</td> 
</tr>

所以别人不要打扰他们尝试，失败的尝试名单：

这将无法正常工作或试图与TD标签做任意组合：

<tr runat="server" style="display: none">

这将无法正常工作或试图与TD标签做任意组合：

<tr runat="server" visible="false">

这种类型的工作，但留下了一个空白行：

<tr runat="server" style="visibility: hidden">

来源

2015-10-14 18:14:29

HTML​​标签的样式属性不考虑宽度的设置

回答

相关问题

HTML标签的样式属性不考虑宽度的设置