我的TabContainer是动态添加的。在我电脑IE7下样式正常显示,但至客户那里IE6上样式就变行了!不知道为何!代码如下:
看一下效果图:(别看里面的图片哦。我指的是TAB那几个选项的样式)
IE7下效果:
IE6下效果:
前台
Code
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="height:500px; vertical-align:top">
<asp:Label ID="LabTypeNull" runat="server" Visible="false" ForeColor="Red"
Text="未添加产品,请管理员至后台添加"></asp:Label>
<asp:PlaceHolder ID="PHproduct" runat="server">
</asp:PlaceHolder>
</td>
</tr>
</table>
后台:
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
OleDbConnection conn = new OleDbConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TOPDB"].ToString());
OleDbCommand cmd = new OleDbCommand("select count(*) from ProductType", conn);
conn.Open();
int TypeNull = (int)cmd.ExecuteScalar();
conn.Close();
if (TypeNull == 0)
{
LabTypeNull.Visible = true;
}
else
{
OleDbCommand Typecmd = new OleDbCommand("select * from ProductType", conn);
conn.Open();
OleDbDataReader TypeDr = Typecmd.ExecuteReader();
while (TypeDr.Read())
{
TabContainer tabcon = new TabContainer();
Literal lit = new Literal();
string s = string.Format("<div class='divcss'>{0}</div>", TypeDr["TypeName"].ToString());
lit.Text = s;
//依据TabContainer的ID动态添加TabPanel
OleDbCommand List = new OleDbCommand("select top 5 * from TypeList where TypeID=" + TypeDr["ID"] + "", conn);
OleDbDataReader ListDr = List.ExecuteReader();
while (ListDr.Read())
{
TabPanel Tab = new TabPanel();
Tab.HeaderText = ListDr["TypeListName"].ToString();
Panel Pan = new Panel();
UserControl uc = (UserControl)Page.LoadControl("ascx/ProductList.ascx");
uc.Attributes["ID"] = ListDr["ID"].ToString();
Pan.Controls.Add(uc);
TabContentTemplate temp = new TabContentTemplate();
temp.SetTemplate(Pan);
Tab.ContentTemplate = temp;
tabcon.Controls.Add(Tab);
}
tabcon.CssClass = "AjaxTabStrip";
PHproduct.Controls.Add(lit);
PHproduct.Controls.Add(tabcon);
}
conn.Close();
}
}
}
public class TabContentTemplate : ITemplate
{
private Control _template;
public void SetTemplate(Control templateControl)
{
_template = templateControl;
}
ITemplate Members;
public void InstantiateIn(Control container)
{
container.Controls.Add(_template);
}
}
样式表如下:
/* AJAX - TabContainer */
.AjaxTabStrip .ajax__tab_header
{
border-left:1px #D1DAE3 solid;
border-right:1px #D1DAE3 solid;
border-top:1px #D1DAE3 solid;
font-family: verdana,tahoma,helvetica; /*設定文字*/
font-size: 12px; /*文字大小*/
height:25px;
background:url('bg2.gif') repeat-x top;
}
.AjaxTabStrip .ajax__tab_body /*資料區*/{
font-family:verdana,tahoma,helvetica;/*設定文字*/
font-size:10pt;/*文字大小*/
border:1px solid #D1DAE3;/*邊框*/
border-top:0;/*邊框上頭寬度為0 → 就等於沒有上邊框囉*/
padding:8px; /*文字與邊框間隔*/
background-color:#ffffff;/*背景顏色*/
}
.AjaxTabStrip .ajax__tab_tab /*預設-中間*/
{
font-size: 12px;
color: #1f2f46;
overflow: hidden;
float: left;
padding-left: 10px;
height: 25px;
line-height: 25px;
width:110px;
}
.AjaxTabStrip .ajax__tab_active .ajax__tab_tab
{
font-size: 12px;
font-weight: bold;
color: #1f2f46;
overflow: hidden;
float: left;
background: url(bg4.gif) no-repeat;
padding-left: 10px;
height: 25px;
line-height: 25px;
}