ListView的 - 项模板造型 - 跨浏览器的差异 [英] ListView - Item Template styling - Cross browser differences
问题描述
这是对我的previous问题的后续行动( ListView控件 - 的ItemTemplate表造型)。我仍然在努力使ItemTemplate中是这样的:
This is a follow up on my previous question (ListView - ItemTemplate table styling). I am still trying to make the ItemTemplate look like this:
______________________________________________
| |___________Title_____________|
| Image |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
它完美的Chrome和Opera但在其他浏览器的问题。
It works perfectly in Chrome and Opera but there are problems in the other browsers.
火狐:
______________________________________________
| _____________ | |
|| Image | | |
|| | | |
||____________| |___________Title_____________|
| |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
IE:
______________________________________________
| _____________ |___________Title_____________|
|| Image ||____________Name_____________|
|| ||______Value_____|____Value___|
||_____________|| | |
| | | |
|_______________|______Value_____|____Value___|
在Safari中它显示像在IE浏览器,再加上它增加了它上面的巨大差距。
In Safari it displays like in IE plus it adds a HUGE gap above it.
下面是页的输出和CSS http://jsfiddle.net/9HsvF/21/ 我会AP preciate任何帮助!
Here is the output of the page and the CSS http://jsfiddle.net/9HsvF/21/ I would appreciate any help!
推荐答案
只是一个建议。摆脱表如果可能的话。并尝试一个div布局。一个布局模板输出可以像( http://jsfiddle.net/V5aCa/1/ ):
Just a suggestion. Get rid of the tables if possible. And try a div layout. A layout template output can be like (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;
}
这篇关于ListView的 - 项模板造型 - 跨浏览器的差异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!