2013-09-25 4 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

это отлично работает, если я проверить страницу локально на моей машине Dev, но когда я загрузить его на сервер 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

Ok проблема, кажется, быть разными с разными браузерами и разными версиями.

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, измените размер Outer DIV. Я дал ширину фиксации, так что даже если вы уменьшите размер браузера, он останется тем же.