水平菜单浏览器兼容性

Question

我创建了一个水平菜单来适应容器的整个宽度，但我发现这在许多其他浏览器（Firefox、Internet Explorer、Safari 和 android 浏览器）中无法正常工作。 这些浏览器中的填充/边距渲染太宽，因此最后一个菜单项包裹在容器外，使其不可见。

我想让它在尽可能多的浏览器中工作，您对最大限度地提高兼容性有什么建议？

这是 HTML（请记住，这是在 Drupal 中创建的，因此无法编辑 HTML）：

<div class=”anythingControls”>
	<ul class=”thumbnav”>
		<li class=”first”>
			<a class=”panel1” href=”#”>
				<span>Studio Products</span>
			</a>
		</li>
		<li>
			<a class=”panel2” href=”#”>
				<span>News/Users</span>
			</a>
		</li>
		<li>
			<a class=”panel3” href=”#”>
				<span>Events</span>
			</a>
		</li>
		<li>
			<a class=”panel4” href=”#”>
				<span>Video</span>
			</a>
		</li>
		<li>
			<a class=”panel5” href=”#”>
				<span>Studio Directory</span>
			</a>
		</li>
		<li>
			<a class=”panel6” href=”#”>
				<span>Where To Buy</span>
			</a>
		</li>
		<li class=”last”>
			<a class=”panel7 cur” href=”#”>
				<span>Talk to Us</span>
			</a>
		</li>
	</ul>
</div>

这是 CSS：

.anythingControls {
      background-color: #5fa0d8;
      border-left: solid 2px #5fa0d8;
      border-right: solid 2px #5fa0d8;
      border-bottom: solid 2px #5fa0d8;
      border-top: solid 1px transparent;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;
      margin-top: -2px;  
      margin-bottom: 9px;
      -moz-border-radius:12px; /* Old Firefox */
      height: 40px;
      color: white;
}

.anythingControls a.cur,.anythingControls a:hover {
	background-color: #72bdfd;
	color: #ffffff
	-o-transition:color .1s ease-out, background .3s ease-in;
	-ms-transition:color .1s ease-out, background .3s ease-in;
	-moz-transition:color .1s ease-out, background .3s ease-in;
	-webkit-transition:color .1s ease-out, background .3s ease-in;
	transition:color .1s ease-out, background .3s ease-in;
}

.anythingControls .last a:hover,.anythingControls .last a:active {
	margin-top: -8px;
	border-bottom-right-radius: 10px
}

.anythingControls .first a {
	color: #5fa0d8;
    background: #ffffff;
	margin-top: -8px;
	margin-left: -3px;
	padding-top: 9px;
	padding-bottom: 8px;
	padding-left: 2px;
	border-bottom-left-radius: 10px
}

.anythingControls .last a {
	border-bottom-right-radius: 10px
}

.anythingControls ul {
   margin-left: 4px;
   margin-right: 0px;
   display: table;
}
#slideshow .anythingSlider-minimalist-round .anythingControls ul li {
	list-style: none;
    display: inline;
	margin: 0;
	padding: 0;
	border-right: 1px solid #ffffff;
}

#slideshow .anythingSlider-minimalist-round .anythingControls ul a {
	display: inline-block;
	height: 21px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 0;
	text-decoration: none;
	text-align: center;
	outline: 0;
}

Answer 1

没关系，我的老板只是让我放弃这些按钮，改用页脚，感谢任何愿意回答这个问题的人。