ListView - 項目模板樣式 - 跨瀏覽器差異

Question

這是對我上一個問題（ListView - ItemTemplate table styling）的跟進。我仍然在努力使ItemTemplate中是這樣的：

______________________________________________ 
|    |___________Title_____________| 
| Image  |____________Name_____________| 
|    |______Value_____|____Value___| 
|_______________|______Value_____|____Value___| 

它完美地在Chrome和Opera，但也有在其他瀏覽器的問題。

火狐：

______________________________________________ 
| _____________ |        | 
|| Image | |        | 
||   | |        | 
||____________| |___________Title_____________| 
|    |____________Name_____________| 
|    |______Value_____|____Value___| 
|_______________|______Value_____|____Value___| 

IE：

______________________________________________ 
| _____________ |___________Title_____________| 
|| Image ||____________Name_____________| 
||    ||______Value_____|____Value___| 
||_____________||    |   | 
|    |    |   | 
|_______________|______Value_____|____Value___| 

在Safari它顯示像IE再加上它增加了它上面的巨大差距。

這裏是頁面和CSS的輸出http://jsfiddle.net/9HsvF/21/我將不勝感激任何幫助！

Answer 1

只是一個建議。如果可能，擺脫表格。並嘗試一個div佈局。佈局模板輸出可以像（http://jsfiddle.net/V5aCa/1/）：

<div style="overflow:auto;"> 
    <div class="leftColumn"> 
     <img src="http://static.adzerk.net/Advertisers/da748a4c6e9b4c97af37c32af7531544.jpg"/> 
     </div> 
    <div class="rightColumn"> 
     <div class="titleRow">Title</div> 
     <div class="nameRow">Name</div> 
     <div class="values"> 
      <div>value1</div><div>value2</div> 
     </div>  
     <div class="values"> 
      <div>value3</div><div>value4</div> 
     </div>  
    </div> 
</div> 

和CSS：

.leftColumn 
{ 
    float:left; 
    width:150px; 
    overflow:auto; 
} 
.rightColumn 
{ 
    float:left; 
    overflow:auto; 
} 
.titleRow,.nameRow 
{ 
    text-align:center; 
} 
.values 
{ 
    clear:both; 
} 
.values div 
{ 
    float:left; 
    padding:0px 3px; 
}