How to fix this arrow shape created using CSS in IE9

Question

I've created a shape using below css which displays fine in chrome like this:

But this appears broken in IE9 like this:

How do i fix this? Here is my css/html used for generating this.

.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

I used IE9 using Developer Tools and seems like it's working perfectly for me.

Guess you messed up your developer tools and I assume you have IE8 Standards View turned on...

Use the below meta and see it will work

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

Demo (This is only for OP, as the code runs pefectly on IE9 Standards Mode)