Question

我在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>

CSS：

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;
}

Answer 1

我认为您的主要问题是IE6不承认cfmenu是否存在css定位的有效标记（它不是有效的HTML），而且即使将其更改为有效标记与div类似，它需要设置id，而不是name，以便css对其进行样式设置。

Answer 2

IE6通常被“填充”抛弃。谷歌“盒子模型IE6”。您可以尝试将左侧和右侧填充置零，并使用margin（如果需要）来解决问题。

2 个答案: