2013-09-25 36 views
1

我有一個用戶控件以下代碼:顯示:內聯塊並不總是工作

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="myControl.ascx.cs" Inherits="myControl" %> 
<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 

78% 類型 3天 1D 11H 30m

後面的測試代碼代碼:

protected void Page_Load(object sender, EventArgs e) 
    { 
     for (int i = 0; i < 100; i++) 
     { 
      Control myControl = LoadControl("myControl.ascx"); 
      myControl.ID = "test" + i; 
      Controls.Add(myControl); 
     } 
    } 

在我後面的代碼我上面添加用戶控件的多個條目,我想在「盒子」(每格)是水平排列的,像這樣:

enter image description here

,如果我在本地測試頁面我的開發機器上,但是當我把它上傳到它被搞砸IIS服務器工作正常,並列出它們垂直,而不是像這樣:

enter image description here

我該如何解決這個問題?從源視圖

HTML代碼:

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 

</title><meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<body style="background-color:#003366"> 
    <form method="post" action="Default.aspx" id="form1"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2Njc2NjM3M2Rk5VNtF6ySWjVFGFUfp3hHlD6Brf8kPq3gyNqaYdvPhTg=" /> 
</div> 


    </form> 
</body> 
</html> 

<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<div style="display:inline-block"> 
     <table id="test0_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;"> 
    <tr style="font-family:Arial Black;"> 
     <td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td> 
    </tr><tr> 
     <td>Type</td> 
    </tr><tr> 
     <td> 3 Days</td> 
    </tr><tr> 
     <td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td> 
    </tr> 
</table> 
</div> 


<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<div style="display:inline-block"> 
     <table id="test1_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;"> 
    <tr style="font-family:Arial Black;"> 
     <td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td> 
    </tr><tr> 
     <td>Type</td> 
    </tr><tr> 
     <td> 3 Days</td> 
    </tr><tr> 
     <td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td> 
    </tr> 
</table> 
</div> 


<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<div style="display:inline-block"> 
     <table id="test2_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;"> 
    <tr style="font-family:Arial Black;"> 
     <td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td> 
    </tr><tr> 
     <td>Type</td> 
    </tr><tr> 
     <td> 3 Days</td> 
    </tr><tr> 
     <td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td> 
    </tr> 
</table> 
</div> 


<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<div style="display:inline-block"> 
     <table id="test3_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;"> 
    <tr style="font-family:Arial Black;"> 
     <td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td> 
    </tr><tr> 
     <td>Type</td> 
    </tr><tr> 
     <td> 3 Days</td> 
    </tr><tr> 
     <td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td> 
    </tr> 
</table> 
</div> 


<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 
<div style="display:inline-block"> 
     <table id="test4_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;"> 
    <tr style="font-family:Arial Black;"> 
     <td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td> 
    </tr><tr> 
     <td>Type</td> 
    </tr><tr> 
     <td> 3 Days</td> 
    </tr><tr> 
     <td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td> 
    </tr> 
</table> 
</div> 


<head> 
    <title></title> 
    <style> 
    .RowBGImage 
    { 
    background-image:url('tableBG.gif'); 
    background-repeat:repeat-x; 
    display:block; 
    } 
    td 
    { 
     padding:0px 0px 5px 0px; 
    } 
    .HeaderPadding 
    { 
     padding:0px 0px 10px 0px; 
    } 
</style> 
</head> 

.... ...... ..... 它會持續下去,直到100

+1

有趣的不是你的ASP代碼,而是瀏覽器中產生的代碼。你可以請張貼嗎? – HerrSerker

+0

@HerrSerker是正確的,有時ASP控件以愚蠢的方式渲染事物,對於(完全不相關的)示例,爲單選按鈕列表創建一個表。 – jbaum012

+0

通過生成的代碼我的意思是HTML和CSS – HerrSerker

回答

0

好這個問題似乎不同的瀏覽器和不同的版本。

0
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <style> 


     .RowBGImage { 
      background-image: url('tableBG.gif'); 
      background-repeat: repeat-x; 
      background-color: White; 
      border-color: Black; 
      border-width: 1px; 
      border-style: Solid; 
      font-family: Arial; 
      width: 100%; 
     } 

     td { 
      padding: 0px 0px 5px 0px; 
     } 

     .HeaderPadding { 
      padding: 0px 0px 10px 0px; 
     } 
     div.outer { 
      display: block; 
      width: 1000px; 
     } 
     div.inner { 
      display: inline-block; 
     } 
    </style> 
</head> 
<body style="background-color: #003366"> 
    <form method="post" action="Default.aspx" id="form1"> 
     <div class="aspNetHidden"> 
      <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2Njc2NjM3M2Rk5VNtF6ySWjVFGFUfp3hHlD6Brf8kPq3gyNqaYdvPhTg=" /> 
     </div> 

    </form> 
    <div class="outer" > 
     <div class="inner"> 
      <table id="test0_tblCell" class="RowBGImage"> 
       <tr style="font-family: Arial Black;"> 
        <td class="HeaderPadding" align="left">361299</td> 
        <td class="HeaderPadding" align="right">78%</td> 
       </tr> 
       <tr> 
        <td>Type</td> 
       </tr> 
       <tr> 
        <td>3 Days</td> 
       </tr> 
       <tr> 
        <td><span style="font: bold; font-size: xx-large;">1d 11h 30m</span></td> 
       </tr> 
      </table> 
     </div> 

     <div class="inner"> 
      <table id="test1_tblCell" class="RowBGImage"> 
       <tr style="font-family: Arial Black;"> 
        <td class="HeaderPadding" align="left">361299</td> 
        <td class="HeaderPadding" align="right">78%</td> 
       </tr> 
       <tr> 
        <td>Type</td> 
       </tr> 
       <tr> 
        <td>3 Days</td> 
       </tr> 
       <tr> 
        <td><span style="font: bold; font-size: xx-large;">1d 11h 30m</span></td> 
       </tr> 
      </table> 
     </div> 

     <div class="inner"> 
      <table id="test2_tblCell" class="RowBGImage"> 
       <tr style="font-family: Arial Black;"> 
        <td class="HeaderPadding" align="left">361299</td> 
        <td class="HeaderPadding" align="right">78%</td> 
       </tr> 
       <tr> 
        <td>Type</td> 
       </tr> 
       <tr> 
        <td>3 Days</td> 
       </tr> 
       <tr> 
        <td><span style="font: bold; font-size: xx-large;">1d 11h 30m</span></td> 
       </tr> 
      </table> 
     </div> 

     <div class="inner"> 
      <table id="test3_tblCell" class="RowBGImage"> 
       <tr style="font-family: Arial Black;"> 
        <td class="HeaderPadding" align="left">361299</td> 
        <td class="HeaderPadding" align="right">78%</td> 
       </tr> 
       <tr> 
        <td>Type</td> 
       </tr> 
       <tr> 
        <td>3 Days</td> 
       </tr> 
       <tr> 
        <td><span style="font: bold; font-size: xx-large;">1d 11h 30m</span></td> 
       </tr> 
      </table> 
     </div> 

     <div class="inner"> 
      <table id="test4_tblCell" class="RowBGImage"> 
       <tr style="font-family: Arial Black;"> 
        <td class="HeaderPadding" align="left">361299</td> 
        <td class="HeaderPadding" align="right">78%</td> 
       </tr> 
       <tr> 
        <td>Type</td> 
       </tr> 
       <tr> 
        <td>3 Days</td> 
       </tr> 
       <tr> 
        <td><span style="font: bold; font-size: xx-large;">1d 11h 30m</span></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html> 

。你能檢查一下嗎?如果你只想要3格,那麼改變外部DIV的大小。我已經給出了修復寬度,以便即使減小瀏覽器的大小也保持不變。