css - li 元素在 Internet Explorer 中未垂直对齐

Question

在我的导航菜单中，我将 li 设置为 100% 高度，以便文本在菜单中垂直居中。这在 Chrome、Firefox、Safari 等上运行良好，但在 IE 中它不会提取此 CSS。 li 仅与文本本身一样高，因此菜单元素与顶部对齐。

.nav li{height:100%}

我调查过这个，有人建议所有父容器也必须有 100% 的高度才能在 IE 中工作，但他们这样做了。

有人有什么想法吗？

提前致谢!

代码如下:

<nav role="navigation">
          <ul class="nav">
            {% for link in linklists.main-menu.links %}
            {% assign has_sub_menu = false %}
            {% assign has_sub_categories = false %}
            {% assign parent_link_active = false %}
            {% assign child_list_handle = link.title | handle %}
            {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
              {% assign has_sub_menu = true %}
              {% for l in linklists[child_list_handle].links %}
                {% if page_title == l.title %}
                  {% assign parent_link_active = true %}
                {% endif %}
              {% endfor %}
            {% elsif link.type == 'collection_link' and link.object.all_tags.size > 0 %}
              {% assign has_sub_categories = true %}
            {% endif %}
            <li class="nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if link.active or parent_link_active %} active{% endif %}{% if has_sub_menu or has_sub_categories %} has-dropdown{% endif %}">
              {{ link.title | link_to: link.url }}
              {% if has_sub_menu or has_sub_categories %}
              <ul class="sub-nav">
                <li class="sub-nav-niblet"></li>
                {% if has_sub_menu %}
                  {% for l in linklists[child_list_handle].links %}
                  <li class="sub-nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">
                    <a class="{% if forloop.first %}first{% elsif forloop.last %}last{% endif %}" href="{{ l.url }}">{{ l.title }}</a>
                  </li>
                  {% endfor %}
                {% elsif has_sub_categories %}
                  {% for tag in link.object.all_tags %}
                  <li class="sub-nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if current_tags contains tag %} active{% endif %}">
                    <a class="{% if forloop.first %}first{% elsif forloop.last %}last{% endif %}" href="{{ link.url }}/{{ tag | handle }}">{{ tag }}</a>
                  </li>
                  {% endfor %}
                {% endif %}
              </ul>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </nav>

还有 CSS:

nav {
    display: block;
    height: 100%;
    position: absolute;
    width: auto;
    right: 0;
    float: none;
    margin-right: 210px;
}

.nav {
    display: table;
    float: right;
    height: 100%;
    margin: 0;
}

    .nav li { 
        display: table;
        float: left;
        height: 100%;
        position: relative;
        width: auto;
    }

        .nav li a {
            color: #eee;
            display: table-cell;
            font-size: 18px;
            height: 100%;
            padding: 0 30px;
            vertical-align: middle;
        }

            .nav li a:hover {
                color: #fff;
                background-color:#1d1a1c;
            }

Answer 1

您好，请在您的代码上试试这个。在 CSS 中将 .nav 的属性从 display:table 更改为 this

.nav {
   display: block;
}