Css三角形在IE中不能正確渲染

我正在嘗試爲頭導航創建一個css trianlge。我已經實現了它，但它在IE中不能正確渲染。Css三角形在IE中不能正確渲染

這裏是我創建的示例的工作小提琴解決方案。我已經修復了位置，但是當我嘗試在IE中運行（目前我有IE 11.0）時，三角形呈現爲方框，但是當我嘗試在Chrome和FF中運行它工作正常。

a:hover:after { 
      background: white; 
      border: solid black; 
      border-width: 1px 1px 0 0; 
      bottom: 0px; 
      content: ' '; 
      display: block; 
      height: 10px; 
      left: 32px; 
      position: absolute; 
      width: 10px; 
      z-index: 99; 
      -webkit-transform: rotate(-45deg); 
      -webkit-transform-origin: 50% 50%; 
     }

來源

2014-03-06 codebot

看一看這樣的：http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ – DonJuwe

我不知道IE支持-webkit轉換樣式。（試試'變換'） –

'-webkit'只適用於Webkit（Chrome/Safari/Opera15 +）。您錯過了其他廠商的前綴，例如'-ms'和W3C標準屬性。 –

使用-ms-transform: rotate(-45deg)

來源

2014-03-06 08:08:04

+1正確答案 –

還指示其他瀏覽器前綴！ –

感謝阿克沙伊mohite。作爲一個便箋，我已經編輯了搜索解決方案的js小提琴。

小提琴：http://jsfiddle.net/cKnyQ/25/

#Container a:hover::after { 
     content: ""; 
     display: block; 
     border: 8px solid black; 
     border-bottom-color: white; 
     position: absolute; 
     bottom: 0px; 
     left: 50%; 
     margin-left: -12px; 
     background: white; 
    }

來源

2014-03-06 08:31:52 codebot

Css三角形在IE中不能正確渲染

回答

相關問題