html - 如何修复在 IE9 中使用 CSS 创建的箭头形状

Question

我使用下面的 css 创建了一个形状，它在 chrome 中显示良好，如下所示:

但这在 IE9 中看起来像这样被破坏了:

我该如何解决这个问题？这是我用于生成它的 css/html。

.arrow-head {
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
  float: left;
}

.arrow-mid {
  background: blue;
  height: 20px;
  width: 80px;
  font-size: 12px;
  color: white;
  text-align: center;
  float: left;
}

.arrow-tail {
  width: 0px;
  height: 0px;
  border-top: 10px solid blue;
  border-bottom: 10px solid blue;
  border-left: 10px solid transparent;
  float: left;
}

<div class="arrow-tail"></div>
<div class="arrow-mid"></div>
<div class="arrow-head"></div>

Answer 1

我通过开发者工具使用 IE9，看起来它非常适合我。

我猜你搞砸了你的开发者工具，我假设你打开了 IE8 标准 View ...

使用下面的 meta 看看它会起作用

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Demo (这仅适用于 OP，因为代码在 IE9 标准模式下完美运行)