如何解决使用CSS创建此箭头形状IE9

我创建使用下面的CSS的形状显示细腻的镀铬是这样的： enter image description here 如何解决使用CSS创建此箭头形状IE9

但这在IE9出现破这样的：

enter image description here

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

<html> 
<style> 
.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; 
} 
</style> 
<body> 
<div class="arrow-tail"></div><div class="arrow-mid"></div><div class="arrow-head"></div> 
</body> 
</html>

来源

2014-01-28 Pranalee

似乎工作在IE9 **模式** IE11 –

为什么downvote？任何意见？ – Pranalee

是不是我downvoted。 –

我用开发工具使用IE9，似乎它对我来说是完美的。

猜你搞砸了你的开发工具，我以为你有IE8的标准视图打开...

使用下面meta，看看它会工作

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

Demo（这是唯一对于OP，因为代码在IE9标准模式下完全运行）

来源

2014-01-28 11:35:19

对我来说，它的工作只有当我添加以上元标记 – Pranalee

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

如何解决使用CSS创建此箭头形状IE9

回答

相关问题