Html Chrome：内联块，填充右键并右键单击bug

我正在为我们团队的网站创建一个以CSS为中心的水平列表。虽然尚未完成，但这里有一个演示，展示了到目前为止的效果：

• 在Firefox中，列表显示了我想要的外观
• 在IE中，它不是完美的，但我以后可以修复它
• 然而，在Chrome中，较长的文本会溢出页面之外 项目。。。直到我右键点击他们
• 或者直到我在Chrome的inspector中取消选中float，然后再选中它 再说一遍

这种奇怪的行为。右击？为什么？谷歌搜索一无所获。搜索这个论坛也没有发现任何关于这一现象的信息

我在Windows上使用Chrome40，但它也可能发生在不同的版本上

使此列表如此复杂和独特的是每个项目的背景图像。我希望每个项目的文本在背景图像中垂直和水平居中。很简单，但是背景图像有透明的角，我需要使用填充将文本推到中间

上图显示了每个项目在居中水平列表中的外观，文本在蓝色区域居中，而不是在透明角的顶部（以绿色突出显示）

然而，上图显示了我现在在Chrome中看到的内容。文本错误地溢出框外。下面是一个来自测试页面的清理代码示例

CSS:

HTML:

我如何才能可靠地将填充正确地添加到显示：Chrome中的内联块元素（如果有的话）

---

JSFiddle？

对不起：D，请检查一下 HMLT：您需要删除中的标记div

<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><a href="/index.php">Homepage</a></li>
<li><a href="/login/">Login/Register</a></li>
<li><a href="/update/mirrors.php">Download Game</a></li>
<li><a href="/levels/index.php">Download Levels</a></li>
<li><a href="/lb/view.php">View Leaderboards</a></li>
<li><a href="/infotutorial/index.php">Info/Tutorials</a> </li>
<li><a href="/about.php">Contact Locations/About</a></li>
</ul>
</div>

---

注意：不能在布局中使用百分比值填充。

这是一个奇怪的错误。如果我将填充从一个百分比（10%）更改为一个固定值（2em），那么在JSFIDLE中似乎是可行的。我不能使用固定值，因为图像延伸到文本的长度（请注意背景大小），并且填充需要相对于背景图像。我不明白你的意思，它可以完美地使用固定值。背景图像确实延伸到文本+填充。请看这是在使用您的代码。对于倒数第二个元素，它看起来很好。但看看最后一个元素。它已逐渐靠近图像上的透明区域。这不会有什么大不了的，除非这种风格的列表将被用来显示用户输入的内容，并且不断变化，所以它需要非常灵活。但是谢谢你的建议：）如果其他方法都失败了，我可能会用它。哦，我明白了。很抱歉顺便说一句，您可能希望查看边框图像以寻找替代方案，保留背景图像以备备用。我不确定我是否理解此解决方案。把这个放在代码的末尾没有明显的区别。给最后一个李一个“最后一个孩子”的班级，然后把：改为a。也没有什么不同。我应该把它放在哪里，这样它才能正常工作？这样你就可以删除：最后一个孩子。但与李的实力并不相等。因为您使用了最小宽度：150px；。我需要li的最小宽度为150px，否则背景图像将小于其尺寸。

<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><a href="/index.php"><div>Homepage</div></a></li><!--
--><li><div><a href="/login/">Login/Register</a></div></li><!--
--><li><div><a href="/update/mirrors.php">Download Game</a></div></li><!--
--><li><div><a href="/levels/index.php">Download Levels</a></div></li><!--
--><li><div><a href="/lb/view.php">View Leaderboards</a></div></li><!--
--><li><div><a href="/infotutorial/index.php">Info/Tutorials</a></div></li><!--
--><li><a href="/about.php"><div>Contact Locations/About</div></a></li>
</ul>
</div>

ul.welcomeguest li:last-child{
min-width: inherit;
}

<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><a href="/index.php">Homepage</a></li>
<li><a href="/login/">Login/Register</a></li>
<li><a href="/update/mirrors.php">Download Game</a></li>
<li><a href="/levels/index.php">Download Levels</a></li>
<li><a href="/lb/view.php">View Leaderboards</a></li>
<li><a href="/infotutorial/index.php">Info/Tutorials</a> </li>
<li><a href="/about.php">Contact Locations/About</a></li>
</ul>
</div>

body {
background-color:#EEEEEE;
}
ul.welcomeguest li a {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
float:left;
background:url(http://marbleblastultra.tk/images/button_d.png) no-repeat center;
background-size:100% 100%;
padding:0 20px;
}
.welcomeguest li {
display: inline-block;
list-style: outside none none;
overflow:hidden;
}