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

I am working on a website in Dreamweaver and I am somewhat of a beginner to some aspects of web design.

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

I have a vertical Spry Menu Bar running along the left side of my page that is working fine in most browsers, except good old internet explorer. In most browsers, the items in the menu bar will fit to the width of the menu bar, but in internet explorer, the items are trimmed down to the size of the word they contain. In some situation they are trimmed so much that two menu items are on the same line. The same thing is happening for submenus as well.

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

Here is the site: http://www.lakeathleticboosterclub.com/ Go ahead and test it out for yourself in case I wasn't describing the problem very well, and here is the CSS that I am working with.

这是网站：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;
}
}

Any help would be greatly appreciated.

任何帮助将不胜感激。

1 个解决方案

#1

Okay, so it seems you need to set ul.MenuBarVertical to have a width that will fill its container:

好吧，所以你似乎需要设置ul.MenuBarVertical以具有填充其容器的宽度：

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

However, the sidebar has no width either so now we need to add:

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

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

And then that will screw up everything until we change this:

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

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

Since it doesn't actually have an explicit width, the rendered dimension of your sidebar depends entirely on how the browser decides to size everything. In IE, it just doesn't work out well. Using this method should do the trick!

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

Also, for posterity, here is the original fix from my comment:

此外，对于后代，这是我的评论中的原始修复：

add display: block; or even width: 100% to ul.MenuBarVertical li {...}

添加显示：块;甚至宽度：100％到ul.MenuBarVertical li {...}

If this causes strange behaviour in the main container, it's likely due to content wrapping issues arising from using floats. You can resolve that with setting `overflow: hidden' to .container. It triggers browsers, including IE, to recognize the dimensions of floated content and wraps accordingly.

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

Hope this helps! If it's not quite there after this, let me know and I'll see if I can determine the issue.

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

#1