2
コンテナの幅に合わせて水平メニューを作成しましたが、他の多くのブラウザ（Firefox、Internet Explorer、Safari、アンドロイドブラウザ）では正しく動作しません。 これらのブラウザのパディング/マージンがあまりにも大きくレンダリングされているため、最後のメニュー項目がコンテナの外側に折り返されて見えなくなります。水平メニューブラウザの互換性
可能な限り多くのブラウザで動作するようにしたいと考えていますが、互換性を最大限に高めるためにどのような提案をしていますか？ここで
は、（HTMLを編集することができないので、これはDrupalの中で作成された、心に留めて）HTMLである：ここでは
<div class=”anythingControls”>
\t <ul class=”thumbnav”>
\t \t <li class=”first”>
\t \t \t <a class=”panel1” href=”#”>
\t \t \t \t <span>Studio Products</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class=”panel2” href=”#”>
\t \t \t \t <span>News/Users</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class=”panel3” href=”#”>
\t \t \t \t <span>Events</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class=”panel4” href=”#”>
\t \t \t \t <span>Video</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class=”panel5” href=”#”>
\t \t \t \t <span>Studio Directory</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class=”panel6” href=”#”>
\t \t \t \t <span>Where To Buy</span>
\t \t \t </a>
\t \t </li>
\t \t <li class=”last”>
\t \t \t <a class=”panel7 cur” href=”#”>
\t \t \t \t <span>Talk to Us</span>
\t \t \t </a>
\t \t </li>
\t </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 {
\t background-color: #72bdfd;
\t color: #ffffff
\t -o-transition:color .1s ease-out, background .3s ease-in;
\t -ms-transition:color .1s ease-out, background .3s ease-in;
\t -moz-transition:color .1s ease-out, background .3s ease-in;
\t -webkit-transition:color .1s ease-out, background .3s ease-in;
\t transition:color .1s ease-out, background .3s ease-in;
}
.anythingControls .last a:hover,.anythingControls .last a:active {
\t margin-top: -8px;
\t border-bottom-right-radius: 10px
}
.anythingControls .first a {
\t color: #5fa0d8;
background: #ffffff;
\t margin-top: -8px;
\t margin-left: -3px;
\t padding-top: 9px;
\t padding-bottom: 8px;
\t padding-left: 2px;
\t border-bottom-left-radius: 10px
}
.anythingControls .last a {
\t border-bottom-right-radius: 10px
}
.anythingControls ul {
margin-left: 4px;
margin-right: 0px;
display: table;
}
#slideshow .anythingSlider-minimalist-round .anythingControls ul li {
\t list-style: none;
display: inline;
\t margin: 0;
\t padding: 0;
\t border-right: 1px solid #ffffff;
}
#slideshow .anythingSlider-minimalist-round .anythingControls ul a {
\t display: inline-block;
\t height: 21px;
\t margin-top: 3px;
\t margin-bottom: 3px;
\t padding: 0;
\t text-decoration: none;
\t text-align: center;
\t outline: 0;
}