代码之家 › 专栏 › 技术社区 › Eric Belair

IE6中的CFMENU向左移动,比包含DIV的要宽

menu coldfusion css html

Eric Belair · 技术社区 · 14 年前

我在一个DIV里面有一个水平的CFMENU,在IE7/IE7/FF/Chrome中,菜单是向右浮动的,正如我的CSS中所指定的,但是在IE6中,菜单移到包含它的DIV的左边,它的宽度超出了包含DIV的边界。我已经包含了下面所有适用的HTML和CSS:

HTML格式:

<body>
     <div align="center">
         <div id="bodyContainer">
             <div class="contentContainer">
                 <div id="middlenav">
                     <div class="linksContainer">
                         <cfmenu name="ajaxMenu"  type="horizontal">

                        ...

                         </cfmenu>

                    </div>
                 </div>
             </div>
         </div>
     </div>
 </body>

body, img, div, p, a, form, fieldset, ol, ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
}



body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
}



div {
    overflow: hidden;
}



p, form, table, ol, ul {
    padding-top: 10px;
}



ol ul {
    padding-top: 5px;
    list-style-type: disc;
}



ol, ul {
    margin-left: 30px;
}



li {
    padding-bottom: 5px;
}



a {
    text-decoration: none;
}



a:hover {
    text-decoration: underline;
}



.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
}



.linksContainer a {
    font-size: 13px;
}



.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
}



#ajaxMenu {
    width: 960px;
}



#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
}



#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
}



#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
}



#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
}



/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
}



#ajaxMenu li {
    height: auto;
    width: auto;
}



#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
}



#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
}



#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;
}

2 回复 | 直到 14 年前

ScottS 14 年前

我认为你的主要问题是IE6不承认 cfmenu 作为css目标的有效标记(它不是有效的HTML),而且,即使更改为 div id 设置,而不是 name ,以便css设置样式。

eapen 14 年前

您可以尝试将左右两边的填充值归零,然后改用margin(如果需要)来解决问题。