2012-02-15 67 views
2

在下面的代碼片段中,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。

+0

對於我對你的代碼作了一些修改:http://jsfiddle.net/28d2A/ – Yogu 2012-02-15 21:40:27

+1

「RequiredFieldValidator」在頁面中注入了什麼? – 2012-02-15 21:41:24

+1

@Diodeus輸出''標籤。 – jrummell 2012-02-15 21:45:18

回答

2

<asp:RequiredFieldValidator>是不是應該在<td>之一?

編輯:<table><tr>之間的<asp:Panel>可能沒有幫助。也就是說,你不應該在你的表中有額外的控件/標籤,它們不應該在那裏。像<asp:Panel>應該包裝整個表或在<td>之一。

編輯:簡而言之,排列的標籤會產生無效的HTML,所以所有的造型投注都關閉。

+0

將此移入​​不幸的是沒有改變任何東西。 – kmarks2 2012-02-15 21:48:35

+1

將什麼移入'​​'? – codeulike 2012-02-15 21:50:58

+0

對不起,我將驗證器移動到​​。我也刪除了ASP面板。現在它似乎工作,但只有當包含瀏覽器窗口或iframe是> 300px。當它是150px左右時,兩個​​都會得到50%。 – kmarks2 2012-02-15 21:54:07

2

首先,將您的驗證器放入<td>

其次 - 檢查其他行的寬度設置'<td>樣式 - 您可能有衝突。

如果您將textbox取出,會發生嗎?

+0

我不包含任何樣式表,我只是在那裏進行內聯。也謝謝你推薦刪除tb。在我刪除了tb之後,只是放入了文本,同樣的問題。 – kmarks2 2012-02-15 21:45:56

+1

好吧 - 檢查你的其他行'​​「內聯」的衝突。 :-)(風格是一種風格,不管它是存儲在表單中還是內聯等) – Chains 2012-02-15 21:50:56

2

看來,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> 

+0

今天晚些時候我會試試這個。這看起來很有希望。 – kmarks2 2012-02-16 16:31:56

0

我在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"> 
相關問題