在“nav ul li”类型菜单（symfony）上，当 ie9 中的 padding 大于 0 时，CSS 边框消失

Question

这是我在这里的第一个问题，尽管多年来我无数次使用该网站。我不想承认，但这次 ie9 打败了我。

这是我的问题。我有一个非常标准的导航菜单： 我有一些树枝，因为它是在 Symfony2 中完成的

<nav>
  <ul>
    <li class="main_menu_left">
      <a href="#">Domaines</a>
      <ul>
        {% for domain in domains %}
          <li>
            <a href="{{ path('domains', {'id': domain.id}) }}">{{ domain.name }}</a>
            <ul>
              {% for business in domain.getBusinessesVisibleOrdered %}
                <li>
                  <a href="{{ path('domains', {'id': domain.id}) }}#b{{ business.id }}">{{ business.name }}</a>
                  <ul>
                    {% for job in business.getJobsVisibleOrdered %}
                      <li><a href="{{ job.url }}" target="_blank">{{ job.name }}</a></li>
                    {% endfor %}
                  </ul>
                </li>
              {% endfor %}
            </ul>
          </li>  
        {% endfor %}
      </ul>
    </li>
    <li class="main_menu_right">
      <a href="mailto:regine.laboure@bnpparibas.com">Contact</a>
    </li>
    <li class="main_menu_right">
      <a href="#">Liens utiles</a>
      <ul>
        {% for link in links %}
          <li>
            <a href="{{ link.url }}" target="_blank">{{ link.name }}</a>
          </li>
        {% endfor %}
      </ul>  
    </li>
  </ul>
</nav>

现在是 CSS

nav {
 padding-top: 23px;
 height:30px;
 background-image:url('../images/jds_banner.jpg');
 background-repeat:repeat-x;
 //border-collapse: collapse;
}

nav .main_menu_left {
 float:left;
 margin-left:50px;
}

nav .main_menu_right {
 float:right;
 margin-right:50px;
}

nav > ul {
 margin: 0;
 padding: 0;
list-style: none;
}

nav > ul > li > a {
 border-bottom: 1px solid #a6d3b4;
}

nav ul li {
 display:block;
 position:relative;
 float:left;
}

nav ul li a {
 display: block;
 padding: 5px;// <- right here is the problem <-----------------------
 text-decoration: none;
 color: black; 
 white-space: nowrap;
 background-color:white;
}

nav ul li:hover > a {
 color: white;
}
nav > ul > li:hover > a, nav > ul > li > ul > li:hover > a {
 background-color:#00915a;
}
nav > ul > li > ul > li > ul > li:hover > a {
 background-color:#4181c3;
}
nav > ul > li > ul > li > ul > li > ul > li:hover > a {
 background-color:#a1c438;
}

nav ul li:hover > ul {
 display: block;
}

nav > ul ul {
 //box-sizing:border-box;
display: none;
 border:1px solid grey;
 padding: 0;
 position: absolute;
 top: 100%;
}

nav > ul ul li {
 float: none;
 position: relative;
}

nav > ul ul ul {
 position: absolute; 
 left: 100%; 
 top:0;
}

问题是当我尝试在菜单上添加一些填充时，一些边框在 ie9 中消失了。当我说“一些”时，我的意思是我无法弄清楚规则是什么。它可以是 4 个边中的任何一个，有时同时是 2 个边（如左右，或顶部和左侧......仍然没有找到规则）。大多数 UL 元素都显示了 4 个边框，只有其中一些没有。

我当前的 DOCTYPE 是<!DOCTYPE html>，但我必须添加它才能使网站正常工作<meta http-equiv="X-UA-Compatible" content="IE=edge" />，因为否则该网站在 ie9 中根本无法工作（在我的公司中，管理员让 Internet Explorer 以某种方式工作“ie7”默认模式之类的......）

我尝试过调整 DOCTYPE，但到目前为止没有运气。

无论如何，提前感谢您的帮助:)

Answer 1

从 Verdana 字体切换回 Arial“解决”了这个问题，因为我没有留下任何缺失的边框。使用 verdana 字体不是强制性的，但恕我直言。