2014-01-28 78 views
1

我創建使用下面的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> 
+0

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

+0

爲什麼downvote?任何意見? – Pranalee

+0

是不是我downvoted。 –

回答

2

我用開發工具使用IE9,似乎它對我來說是完美的。

猜你搞砸了你的開發工具,我以爲你有IE8的標準視圖打開...

使用下面meta,看看它會工作

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

Demo(這是唯一對於OP,因爲代碼在IE9標準模式下完全運行)

+0

對我來說,它的工作只有當我添加以上元標記 – Pranalee

+0

@Pranalee因爲你有8個標準模式運行 –