：在IE7

我有這樣的代碼，這顯示了一個小三角使用純CSS，它適用於所有現代瀏覽器，包括IE8，IE9僞類後：：在IE7

<html> 
<head> 
    <style> 
     .arrow:after { 
      display: inline-block; 
      width: 0; 
      height: 0; 
      margin: 4px 0 0 4px; 
      vertical-align: top; 
      text-indent:-9999px; 
      border-left: 4px solid transparent; 
      border-right: 4px solid transparent; 
      border-top: 4px solid black; 
      content: "&darr;"; 
     } 
    </style> 
</head> 
<body> 
    <div class="arrow">testing</div> 
</body> 
</html>

的問題是，它不工作在IE7上，它只是不顯示箭頭。

我見過有人建議使用ie8.js，但它也不起作用。

有誰知道如何使它在IE7上工作？

來源

2011-11-21 David Morales

風格.arrow在有條件的意見專門針對IE7。 ie7不明白：after，：before，：content或display：inline-block。沒有看這個網站，很難提供一個可靠的解決方案。非正式的，我會讓它顯示：block;用文本縮進和使用背景圖像。

來源

2011-11-21 03:42:08 albert

我同意。我認爲這是下載大小的最佳解決方案。下載幾個字節大小的gif，而不是幾千字節大小的javascript是不一樣的。 –

「或display：inline-block for this matter」只有當元素原生顯示不是內聯的時候。如果它不是好的。 –

downvoting已被接受的答案。繼續拖延。 – albert

您是否嘗試過使用CSS3Pie

http://css3pie.com/

來源

2011-11-21 01:06:54

是的，不工作。 –

http://code.google.com/p/ie7-js/項目索賠支持:after，:before和content。你會使用它的IE8.js部分。

測試頁：http://ie7-js.googlecode.com/svn/test/index.html

來源

2011-11-21 04:06:35 Strelok

這是我在打開我的問題之前嘗試的第一個解決方案，但奇怪的是它不適用於IE7。 –

是的，這是可能的IE7，而無需使用JS插件。不要讓反對者欺騙你。這裏是你的更新代碼：

<html> 
<head> 
<style type="text/css"> 
    .arrow:after { 
     display: inline-block; 
     width: 0; 
     height: 0; 
     margin: 4px 0 0 4px; 
     vertical-align: top; 
     text-indent:-9999px; 
     border-left: 4px solid transparent; 
     border-right: 4px solid transparent; 
     border-top: 4px solid black; 
     content: "&darr;"; 
    } 
    .arrow {*zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("i")).className="ie-after");} 
    .arrow .ie-after {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&darr;');} 
     </style> 
</head> 
<body> 
    <span class="arrow">testing</span> 
</body> 
</html>

來源

2012-09-04 07:56:08

你能告訴我們什麼*縮放？ – commonpike

['zoom']（http://stackoverflow.com/a/1794381/704015）是一個常常用來欺騙IE來設置元素上的'hasLayout'的屬性。這意味着元素負責自己的尺寸和位置，而不是更多地依賴其父母。我在屬性前添加了一個星號，所以它只能被IE7讀取。你可以[在這裏閱讀更多關於星星攻擊的知識]（http://www.evotech.net/articles/IE7hacksamples.html#star2）。 –

這個例子甚至不會起作用....類被放置在什麼地方？ – albert

回答

相關問題