Question

我刚刚在Internet Explorer 11中遇到了一个错误，当然在其他浏览器中没有这个错误。

我有：

按钮样式<a>
应用了垂直线性渐变
和垂直对齐CSS样式
在<ul>列表中（不需要，但我设置垂直对齐的原因）

...并且，正如您在下面的代码片段中看到的那样，顶部的颜色在按钮底部重复！

（我添加了漂亮的颜色以更好地显示问题）

知道它来自哪里以及如何处理这个问题？感谢。

＆＃13;

body {
	background: hsl(0,100%,50%);
}
li {
	height:50px;
    margin-bottom: 10px;
}
.btn {
    background: hsl(100, 100%, 50%);
    border: outset 1px grey;
    text-align: center;
    text-decoration: none;
    padding: 15px;
}
.vertgradient {
    background: linear-gradient(to top, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}
.vertalign {
    vertical-align: middle;
}
.horizgradient {
    background: linear-gradient(to right, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}

＆＃13;

<ul>
  <li>
    <a class="btn vertgradient vertalign">On IE 11, yellow line at the bottom</a>
  </li>
  <li>
    <a class="btn horizgradient vertalign">No problem with a horizontal gradient</a>
  </li>
  <li>
    <a class="btn vertgradient">No problem without "vertical-align"</a>
  </li>
  <li>
    <a class="btn vertalign">No problem without "linear-gradient"</a>
  </li>
</ul>

＆＃13;

Answer 1

问题是显示问题，涉及使用inline元素，block或inlne-clock元素，在这种情况下为a（inline默认情况下）用作inline-clock元素而没有正确的定义。所有其他浏览器都会出现相同的错误，但最终呈现不会出现任何明显问题。

要解决此问题，只需将display: inline-block;添加到按钮（a.btn）。

＆＃13;

body {
    background: hsl(0,100%,50%);
}
li {
    height:50px;
    margin-bottom: 10px;
}
.btn {
    display: inline-block;
    background: hsl(100, 100%, 50%);
    border: outset 1px grey;
    text-align: center;
    text-decoration: none;
    padding: 15px;
}
.vertgradient {
    background: linear-gradient(to top, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}
.vertalign {
    vertical-align: middle;
}
.horizgradient {
    background: linear-gradient(to right, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}

＆＃13;

<ul>
  <li>
    <a class="btn vertgradient vertalign">On IE 11, yellow line at the bottom</a>
  </li>
  <li>
    <a class="btn horizgradient vertalign">No problem with a horizontal gradient</a>
  </li>
  <li>
    <a class="btn vertgradient">No problem without "vertical-align"</a>
  </li>
  <li>
    <a class="btn vertalign">No problem without "linear-gradient"</a>
  </li>
</ul>

＆＃13;

Internet Explorer 11中的垂直对齐+垂直线性渐变错误

1 个答案: