代码之家 › 专栏 › 技术社区 › P.Brian.Mackey

ASP.NET菜单控件不考虑IE或FF中的填充值

css asp.net

1

P.Brian.Mackey · 技术社区 · 15 年前

我设置了荒谬的填充值,无法让填充扩展到内容大小之外的总宽度。FF是否应该遵循一个“框模型”,即填充被添加到内容大小中?这是相关的代码。

环境: IE7,FF3.6

CSS:

.StaticMenuStyle
{
    width: auto;
    background-image: url(../images/nav_repeat.gif);
    background-repeat:repeat-x;
    padding-left: 100px;
    /*padding-top: 10px;
    margin-top: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    float:left;
}  
.StaticMenuStyle a:link
{
    padding-left: 100px;
    text-decoration: none;
}  
.StaticMenuItemStyle
{
    height: 38px;
    /*min-width: 75px;*/
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: center;    
    color:#006c56;
    padding-left: 100px;
    /*padding-left: 100px;
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    border:5px solid clear;
    /*margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;*/
    /*background: right 50% url(../images/nav_div.gif) no-repeat;*/
    background-image: url(../images/nav_div.gif);
    background-repeat:no-repeat;
    background-position:right;
    /*text-indent:5px;*/
}
/*
.StaticSelectedStyle
{
    color:#006c56;
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    overflow:hidden;
}
*/
.StaticHoverStyle
{
    /*color:Black;*/
    /*color:White;*/
    /*height: 38px;*/
    /*background-image: url(../images/nav_over.gif);*/
    /*background-position:center bottom;*/
    /*overflow:hidden;*/
}
.StaticMenuStyle a:hover
{
    /*background-image: none;*/
    height: 38px;
    background-image: url(../images/nav_over.gif);
    background-position:center bottom;
    color:Black;
    text-decoration: none;
}
.DynamicMenuStyle
{
    height: 38px;
    /*width: auto;*/
}

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SJMTemplateDot4.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false"  />
     <asp:Menu 
                ID="MenuMain" 
                runat="server" 
                DataSourceID="SiteMapDataSource2"
                Orientation="Horizontal"
                StaticMenuStyle-cssClass="StaticMenuStyle"
                StaticMenuItemStyle-cssClass="StaticMenuItemStyle"
                StaticHoverStyle-cssClass="StaticHoverStyle"
                />
    </div>
    </form>
</body>
</html>

1 回复 | 直到 15 年前

1

2

MikeWyatt 15 年前

填充是否在另一个CSS文件中被覆盖?尝试 padding-left: 100px !important .

另外,正如我在评论中提到的,您应该安装 Firebug . 它既可以告诉您每个元素的实际计算填充值,也可以向您展示元素精确尺寸的优秀可视化模型,包括填充和边距。

IE Developer Toolbar 对IE有帮助。