How to fix this arrow shape created using CSS in IE9

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>


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)

Need Your Help

Updating jar manifest file - invalid manifest format

java eclipse jar manifest

I need to update the manifest in my jar file that I create (export) within Eclipse. I've tried to follow this explanation without success. I'm not quite sure what to specify on the command line. ...

how do i change the selected row in a UIPickerview to a String(text)?

ios uipickerview

I have put a UIPickerView for the user to select how they are feeling; annoyed, happy, sad etc. However I cannot convert what they have selected to a string or text. Is it possible to do this? If n...