我在用户控件中有以下代码：
<%@ 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>
123456
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);
}
}
在后面的代码中，我在上方添加了用户控件的多个条目，并且希望“框”（每个div）像这样水平对齐：
如果我在开发机器上本地测试该页面，则效果很好，但是当我将该页面上传到IIS服务器时，它变得混乱并垂直列出了它们，如下所示：
我该如何解决该行为？
来自源代码视图的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
最佳答案
好的，对于不同的浏览器和不同的版本，问题似乎有所不同。
关于c# - display:inline-block并不总是有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19005858/