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

【问题标题】：How to fix this arrow shape created using CSS in IE9如何修复在 IE9 中使用 CSS 创建的箭头形状
【发布时间】：2018-04-27 13:04:02
【问题描述】：

我使用下面的 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>

【问题讨论】：

似乎在IE11的IE9 模式下工作
为什么要投反对票？有什么意见吗？
投反对票的不是我。

标签： html css google-chrome internet-explorer css-shapes

【解决方案1】：

我使用开发者工具使用 IE9，似乎它对我来说非常适合。

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

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

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

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

【讨论】：

@Pranalee 因为你有 8 个标准模式正在运行