【发布时间】：2011-09-22 11:54:47
【问题描述】：
我有一个包含 5 个不同文本长度的菜单 - 主页、关于我们、联系我们等 在 Photoshop 的模型中，我为悬停状态创建了一个背景图像，但如果它比文本长，它会被截断，并且在 IE 中不起作用。图片为 105 X 28。这是一个链接to example 当您将鼠标悬停时，您会看到背景图片被截断。我怎样才能解决这个问题？谢谢
【问题讨论】：
【发布时间】：2011-09-22 11:54:47
【问题描述】：
给#main-nav li a{ min-width: 105px;}添加一个css规则
我建议您使用固定大小，即 105px.. 然后为每个菜单项设置 text-align:center，这样它们都可以很好地排列.. 但这取决于您
【讨论】：
按钮对于背景图片来说不够宽。
为每个 li 标签指定样式 width: 105px; height: 28px; 或使用该样式创建一个 CSS 类并将该类应用于每个标签。
【讨论】：
-
另外，删除或增加
.container_12的宽度，否则所有按钮都没有足够的空间。
您可以尝试使用矩形背景图片并使用 CSS border-radius 属性来圆角。
如果这不能让您获得所需的外观或不够兼容，通常的方法是将图像分成三个部分。两端加上一个可以拉伸或平铺的中间部分。
第三种方法是再次使用矩形背景图像，然后创建“蒙版”，即覆盖在主背景图像上的边角切口（与背景颜色相同）的图像，以使边角显得圆润.自从border-radius 属性得到广泛支持以来，我还没有见过这种方法。
【讨论】：
-
是否有教程告诉我如何“将图像分成三部分。两端加上可以拉伸或平铺的中间部分”。 - 我不知道如何为那个做 css
这是一个纯 CSS 解决方案...
http://jsfiddle.net/wdm954/tAaCF/1/
基本上使用 CSS3 border-radius 和 box-shadow 来代替对图像的需求。在旧浏览器中，这将不那么时尚。对于像这样的简单样式，如果那些已经在 Web 上因缺乏 CSS3 而受苦的人没有看到一些漂亮的圆角，那么它不应该是一个交易破坏者。较旧的浏览器在悬停时仍会显示蓝色背景。
【讨论】：