Question

我正在Dreamweaver的一个网站上工作，我有点像网页设计的某些方面的初学者。

我的页面左侧有一个垂直的Spry菜单栏，在大多数浏览器中运行良好，除了好的旧版Internet Explorer。在大多数浏览器中，菜单栏中的项目将适合菜单栏的宽度，但在Internet Explorer中，项目会缩小到它们包含的单词的大小。在某些情况下，它们被修剪得如此之多，以至于两个菜单项在同一条线上。子菜单也会发生同样的事情。

以下是网站：http://www.lakeathleticboosterclub.com/ 如果我没有很好地描述问题，请继续为自己测试一下，这是我正在使用的CSS。

@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin 
or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to 
accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html 
*/
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are 
same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and 
up (-5%) with a higher z-index, but they are initially off the left side 
of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
width: auto;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, 
we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover
with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu 
and are set to use a background image positioned on the far left (95%) and 
centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image 
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we 
underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is 
to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
    display: inline;
    f\loat: left;
    background: #FFF;
}
}

非常感谢任何帮助。

Answer 1

好的，所以你似乎需要设置ul.MenuBarVertical以获得一个将填充其容器的宽度：

ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 100%;
}

但是，侧边栏也没有宽度，所以现在我们需要添加：

.sidebar1 {
    float: left;
    width: 218px; <-- This is changed
    background: #151B8D;
    padding-bottom: 10px;
    color: #fff;
}

然后这会搞砸一切，直到我们改变这个：

.content {
    padding: 10px 0;
    width: 790px; <-- Explicit width
    float: right; <-- Should make things a little more predictable
}

由于它实际上没有明确的宽度，侧边栏的呈现尺寸完全取决于浏览器决定如何调整大小。在IE中，它只是运作不好。使用这种方法应该可以做到！

另外，对于后人，这是我评论中的原始修正：

添加display：block;甚至宽度：100％到ul.MenuBarVertical li {...}

如果这会在主容器中导致奇怪的行为，则可能是由于使用浮动引起的内容包装问题。你可以通过将`overflow：hidden'设置为.container来解决这个问题。它触发浏览器（包括IE）识别浮动内容的尺寸并相应地进行换行。

希望这有帮助！如果在此之后它不完全存在，请告诉我，我会看看能否确定问题。

垂直Spry菜单栏 - IE中的宽度

1 个答案: