css - 在我的 DotNetNuke 皮肤上需要我的 CSS 方面的帮助

Question

我已经为 DotNetNuke 5.x 创建了一个皮肤，并且我尝试尽可能多地使用 css 进行布局。我的问题是 IE 和 FF/Chrome/Safari 之间的一致性。对于大多数网站，我都能克服这个问题，但在这个皮肤中，我已经尝试了我能想到的一切，并花了很多时间试图让两者之间的外观保持一致。当我修好一个时，另一个就会坏掉。谁能帮我解决这个问题？请在 IE 和 FF 中查看此处的皮肤以了解差异:

http://bluebookbasement.coultertechnologies.com

BlueBookBasement_full.ascx

    <%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>


<div id="ControlPanel" runat="server" />
<div id="mainbody">
    <div id="container">
        <div id="top_banner">
            <div style="float:left; "><dnn:LOGO runat="server" id="dnnLOGO"  /></div>
            <div id="top_banner_right">  </div>
        </div>
        <div id="content">
            <div id="content_top_left">
                <div id="content_top_right">
                    <div id="top_nav">
                        <div id="nav_left">
                            <div id="nav_right">
                                <div id="nav_main">
                                    <dnn:NAV 
                                        runat="server" 
                                        id="dnnNAV"  
                                        ProviderName="DNNMenuNavigationProvider" 
                                        IndicateChildren="false" 
                                        ControlOrientation="Horizontal" 
                                        CSSNodeRoot="main_dnnmenu_rootitem" 
                                        CSSNodeHoverRoot="main_dnnmenu_rootitem_hover" 
                                        CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected" 
                                        CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected" 
                                        CSSContainerSub="main_dnnmenu_submenu" 
                                        CSSNodeHoverSub="main_dnnmenu_itemhover" 
                                        CSSNodeSelectedSub="main_dnnmenu_itemselected" 
                                        CSSContainerRoot="main_dnnmenu_container" 
                                        CSSControl="main_dnnmenu_bar" 
                                        CSSBreak="main_dnnmenu_break" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="middle_left">
                <div id="middle_right">
                    <div id="indent_left">
                        <div id="indent_right">

                                <div id="breadcrumbs">
                                    <dnn:TEXT runat="server" id="dnnTEXT"  CssClass="breadcrumb_text" Text="You are here >" ResourceKey="Breadcrumb" />&nbsp;
                                    <dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB"  CssClass="Breadcrumb" RootLevel="0" Separator="&nbsp;>&nbsp;" />
                                </div>
                                <div id="BannerPane" class="BannerPane" runat="server"></div>
                                <div id="TopPane" class="TopPane" runat="server"></div>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" >
                                    <tr>
                                        <td class="leftpane" id="LeftPane" runat="server" valign="top"></td>
                                        <td class="contentpane" id="ContentPane" runat="server" valign="top"></td>
                                        <td class="rightpane" id="RightPane" runat="server" valign="top"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" >
                                                <tr>
                                                    <td class="mid3" id="Mid1Pane" runat="server" valign="top"></td>
                                                    <td class="mid3" id="Mid2Pane" runat="server" valign="top"></td>
                                                    <td class="mid3" id="Mid3Pane" runat="server" valign="top"></td>
                                                </tr>
                                            </table>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td class="leftcontentpane" id="LeftContentPane" runat="server" valign="top" colspan="2"></td>
                                        <td class="rightpane" id="RightSidePane" runat="server" valign="top"></td>

                                    </tr>
                                    <tr>
                                        <td class="leftpane" id="LeftSidePane" runat="server" valign="top"></td>
                                        <td class="rightcontentpane" id="RightContentPane" runat="server" valign="top" colspan="2"></td>

                                    </tr>
                                </table>
                                <div id="BottomPane" class="BottomPane" runat="server"></div>
                                <div class="clear"></div>

                        </div>
                    </div>
                </div>
            </div>            
            <div id="content_bottom">
                <div id="content_bottom_left">
                    <div id="content_bottom_right">
                        <div id="content_bottom_middle">
                            <div id="prefooter">
                                <div class="leftSide">
                                    <dnn:links runat="server" id="dnnLINKS" CssClass="links" Level="Root" Separator="&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div id="footer_left">
                <div id="footer_right">
                    <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footertxt" />&nbsp;|&nbsp;    
                    <dnn:TERMS runat="server" id="dnnTERMS" CssClass="footertxt" />&nbsp;|&nbsp;
                    <dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footertxt" />&nbsp;|&nbsp;
                    <dnn:USER runat="server" id="dnnUSER" CssClass="footertxt" />&nbsp;|&nbsp;
                    <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="footertxt" />
                </div>
            </div>
        </div>
    </div>
</div>

皮肤.css

BODY 
{
    background-color:#214081;
    height:100%; 
    margin:0px; 
    padding:0px; 
}
#mainbody
{
    background-image:url(images/home_2_01.jpg);
    background-repeat:repeat-x;
    background-position:top;

    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
}
#container
{
    width:979px;
    padding: 0;
    text-align:center;
    margin: 0 auto;
}
a
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    color:#000000;
}
.clear
{
    clear:both;
}
#top_banner
{
    /*background-image:url(images/top_banner.gif);
    background-repeat:no-repeat;
    background-position:top;
    width:979px;*/
    height:145px;
}
#top_banner_right
{
    float:right;
    color:#FFFFFF;
    font-size:20px;
    line-height:25px;
    padding-top:70px;
}
#content
{
    background:#fff url(images/home_2_05.jpg) repeat-x top;
    /*background-color:#fff;*/
    min-height:414px;
    padding:0px;
    margin:0px;
}
#content_top_left
{
    background-image:url(images/home_2_04.jpg);
    background-repeat:no-repeat;
    background-position: left top;
    height: 65px;
    padding:0px; margin:0px;

}
#content_top_right
{
    background-image:url(images/home_2_06.jpg);
    background-repeat:no-repeat;
    background-position: right top;
    height: 65px;
    padding:10px 10px 0px 10px; margin:0px;
    /*width:100%;*/

}
#content_bottom
{
    background:url(images/home_2_27.jpg) repeat-x bottom;
    height: 63px;
    padding:0px; 
    margin:0px;
}
#content_bottom_left
{
    background:url(images/home_2_26.jpg) no-repeat bottom left ;
    height: 63px;
    padding:0px; 
    margin:0px;

}
#content_bottom_right
{
    background:url(images/home_2_30.jpg) no-repeat bottom right;
    height: 63px;
    padding:0px; 
    margin:0px;

}
#content_bottom_middle
{
    background:url(images/home_2_28.jpg) no-repeat bottom center;
    height: 63px;
    padding: 0px 0px 0px 0px; 
    margin:0px;

}
#content_all
{
    /*padding: 16px;*/
}
#middle_left
{
    background-image:url(images/home_2_21.jpg);
    background-repeat:repeat-y;
    background-position: left;
    padding: 0px;
    margin:0px;
}
#middle_right
{
    background-image:url(images/home_2_22.png);
    background-repeat:repeat-y;
    background-position: right;
    padding:0px;
    margin:0px;
}
#indent_left
{
    background:url(images/home_2_13.jpg) no-repeat top left;
    padding: 0px; margin:0px;

}
#indent_right
{

    background:url(images/home_2_15.jpg) no-repeat right top;
    padding: 0px 16px 0px 16px; margin:0px 0px 0px 0px;
    overflow: auto;
    /*width: 979px;*/
}

#top_nav
{
    background-image: url(images/home_2_10.jpg);
    background-repeat: repeat-x;
    background-position: top;
    /*width:943px;*/
    height:63px;

}
#nav_left
{
    /*width: 18px;*/
    height: 63px;
    background-image: url(images/home_2_08.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    padding: 0px;
    margin: 0px;
    /*float: left;*/
}
#nav_right
{
    /*width: 21px;*/
    height: 63px;
    background-image: url(images/home_2_12.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    padding: 0px;
    margin: 0px;
    /*float: right;*/
}
#nav_main
{

    padding-top: 10px;
    height: 63px;

}
#video_sub
{
    background-color:#7C7C7C;
    padding:5px;
    color:#FFFFFF;
    text-align:center;
}

/*.main_tab
{
    background-image:url(images/tab_bg.gif);
    background-repeat:no-repeat;
    background-position:top;
    width:648px;
    height:16px;
    padding:15px;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}*/

#prefooter
{
    margin: 0px;
    text-align: left;
    padding: 10px;
}
#footer
{

    background-image:url(images/home_2_38.jpg);
    background-repeat:repeat-x;
    background-position:top;

    height:95px;
    margin-top: 20px;
    text-align: left;

}
#footer_left
{
    background-image:url(images/home_2_36.jpg);
    background-repeat:no-repeat;
    background-position:left top;
    height: 95px;
}
#footer_right
{
    background-image:url(images/home_2_40.jpg);
    background-repeat:no-repeat;
    background-position:right top;
    height: 95px;
    padding: 36px;
    color: blue;
    /*width: 1036px;*/
}
.footertxt
{
    /*color: #fff;*/
}
td.footertxt {
    font-family: verdana, arial, helvetica;
    color: #FFF;
    font-size:10px;
    font-weight: normal;

}
a.footertxt:link, a.footertxt:visited {
    font-family: verdana, arial, helvetica;
    color: #FFF;
    font-size:10px;
    font-weight: normal;
    text-decoration: none;
}
a.footertxt:hover, a.footertxt:active {
    font-family: verdana, arial, helvetica;
    color: #FFF;
    font-size:10px;
    text-decoration: underline;
    font-weight: normal;
}

.controlpanel {
    width: 100%;
    background-color: #fff;
}

.rightpane {

    width:27%;
    /*margin-right:16px;*/
    /*padding-top:10px;*/
    padding: 0px 0px 0px 10px;
    margin:0px;
}
.leftpane {

    width:27%;
    /*margin-right:16px;*/
    /*padding-top:10px;*/
    padding: 0px 10px 0px 0px;
    margin:0px;
}
.contentpane, .TopPane, .BottomPane, .BannerPane {

    /*width:668px;*/

}
.TopPane, .BottomPane, .BannerPane
{


}
.mid3
{
    width:33%;
    padding: 0px;
    margin: 0px;
}

#breadcrumbs
{
    text-align: left;
    margin-left: 16px;
}

/* begin of menu*/

/*--------- dnn menu style ----------*/
/* main menu td */
.main_dnnmenu_bar 
{
    cursor:pointer;
    font-size: 11px; 
    background-color:transparent;
    width:970px;
}

/*  Main Menu Normal  */
.main_dnnmenu_rootitem  
{   
    color: #fff;
    font-size: 13px; 
    font-weight:bold;   
    text-align:center; 
    padding:12px 12px 12px 12px;
    text-transform:uppercase; margin-right:1px;
    white-space:nowrap;
    float:left;
}


/*  Main menu hover  */
.main_dnnmenu_rootitem_hover
{  
    color:#214081;
    font-size: 13px; 
    font-weight:bold;
    text-align:center;
    padding:12px 12px 12px 12px;
    /*background:url(../images/menu_hover.gif) repeat-x top left;*/
    text-transform:uppercase; margin-right:1px;
    white-space:nowrap;
    float:left;
}

/*  Main menu selected  */
.main_dnnmenu_rootitem_selected 
{
    color:#ffffff;
    font-weight:bold;
    text-align:center;
    font-size: 13px;
    padding:12px 12px 12px 12px;
    /*background:url(../images/menu_active.gif) repeat-x top left;*/
    text-transform:uppercase; margin-right:1px;
    white-space:nowrap;
    float:left;
}

/*  SUB Menu Normal */
.main_dnnmenu_submenu 
{
    /*border:1px solid #C0D6E5;*/
    margin-top: 0px;
    margin-left: 3px;
    background-color: #081E43;  
    z-index: 1000; 
    cursor: pointer; 
    cursor: hand; 
    border-top: #FFFFFF 1px solid;
    border-right: #FFFFFF 1px solid;
    border-left: #FFFFFF 1px solid;
    border-bottom: #FFFFFF 1px solid;
    filter: Alpha(Opacity=75, FinishOpacity=100, Style=1);
    opacity: 0.75;
}

.main_dnnmenu_submenu td
{
    /*background-color:#F8FAFF;*/
    z-index: 1000;
    font-size: 11px; 
    font-weight:bold;
    text-align:left;
    color:#fff;
    line-height:2em;
    padding: 0px 5px;
    margin:0px;
}

/*  SUB Menu hover & selected */
.main_dnnmenu_itemhover td   
{  
    background: #CE0D0D url(../images/submenu_hover.gif) repeat-x top left;
    color:#ffffff;
}
.main_dnnmenu_itemselected td{
    background: #CE0D0D url(../images/submenu_active.gif) repeat-x top left;
    color:#ffffff;
}

.main_dnnmenu_break
{
    height: 2px;
    background-color: #D5E0FF;
}

Answer 1

如果没有更详细的信息，很难提供有用的建议。您是否尝试安装 IE Developer Toolbar和 Firebug这样您就可以直接检查每个不一致之处并准确确定差异是什么？我发现这些工具可以很容易地识别一致性问题，这样您就可以发布比“此页面在 IE 和 Firefox 中看起来不一样”更具体的问题。 (虽然我感觉到你的痛苦......解决这些问题可能非常困难:S)