显示内联创建不一致的宽度IE 11

Question

我正在尝试创建一个菜单，其中所有链接都有与之关联的背景，并以内联格式显示。我希望这些元素的宽度都相同，但我很难弄清楚如何做到这一点，因为宽度似乎是基于文本长度，填充似乎没有帮助解决这个问题因为文本长度不同。任何帮助将不胜感激。示例JSFiddle：Here

例：
HTML

<div id="menuLink"><a href="#" id="menu-link-home">Fuzz</a></div>
<div id="menuLink"><a href="#" id="menu-link-home">FuzzBuzz</a></div>

CSS：

#menuLink{
    background:#cccccc;
    display:inline;
    width:200px;
    height:50px;
}

Answer 1

inline个元素不受width语句的影响。

只需制作inline-block。

.menuLink{
    background:#ff0000;
	display:inline-block;
	width:200px;
	height:50px;
}

<div class="menuLink"><a href="#" class="menu-link-home">Fuzz</a></div>
<div class="menuLink"><a href="#" class="menu-link-home">FuzzBuzz</a></div>

JSfiddle Demo

注意：您无法在同一页面上重复使用ID，因此我将其转换为类。

Answer 2

您可以通过将html结构更改为最常用的使用ul li进行导航的做法来实现相同的目的。

<ul>
     <li><a href="#" id="menu-link-home">Fuzz</a></li>
     <li><a href="#" id="menu-link-home">FuzzBuzz</a></li>
</ul>

相同的样式仍然有效：

ul li{
     display:inline-block; 
     width: 200px; 
     background-color:red; 
     height:50px;}