html - Chrome : inline-block, padding-right 和 right click 错误

Question

我正在为我们团队的网站创建一个以 CSS 为中心的水平列表。它尚未完成，但这是到目前为止的演示:http://marbleblastultra.tk/welcomeguest.htm

• 在 Firefox 中，列表看起来像我想要的样子。
• 在 IE 中，它并不完美，但它不是我以后无法修复的。
• 但是，在 Chrome 中，较长的文本会溢出到 元素...直到我右键单击它们...
• 或者直到我在 Chrome 的检查器中取消选中 float-right，然后选中它 再次。

这种奇怪的行为。右键单击？为什么？谷歌搜索什么也没发现。搜索此论坛也没有发现任何有关该现象的信息。

我正在使用 Windows 版 Chrome 40，但它也可能发生在不同的版本上。

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

上图显示了每个元素在居中的水平列表中的外观，文本在蓝色区域内居中，永远不会在透明 Angular 的顶部(以绿色突出显示)。

不过，上图显示的是我现在在 Chrome 中看到的。文本错误地溢出框外。这是测试页中经过清理的代码示例。

CSS:

ul.welcomeguest li {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
display:inline-block;
background:url(images/button_d.png) no-repeat center;
background-size:100% 100%;
}
ul.welcomeguest li div {
display:inline-block;
padding-left:10%;
padding-right:10%;
}

HTML:

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

如果有的话，我如何才能可靠地向 display:inline-block'd 元素添加 padding-right？

JSFiddle? http://jsfiddle.net/mh70zn34/3/

Answer 1

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