替代僞類？

我爲圍繞一些文字的方塊創建了一個美麗的人造傳奇：jsfiddle。但是，我的解決方案使用:before和:after僞類，這在IE 7和IE 8中不起作用。Bummer。替代僞類？

所以我決定着手嘗試定義我自己的跨度，以用於:before和:after僞類的位置。不幸的是，我的解決方案似乎可以替代:before，但不能替代:after：jsfiddle。此外，由於某些莫名其妙的原因，該盒子的內容已經向上移動。

是否可以通過CSS和HTML來完成我正在做的事情？我不想把任何Javascript或jQuery帶入混合。

謝謝！

來源

2012-08-13 carmenism

你可以試着延伸穿過上邊框的所有道路。然後，給文本和箭頭一個背景顏色，以「覆蓋」您想要隱藏的邊框部分。 – 2012-08-13 20:59:27

另外，'display：inline-block'對IE7不起作用（作爲FYI）。 – 2012-08-13 21:00:24

@MicahHenning，這個解決方案對於這個盒子的最終目的是不切實際的，因爲背景不是一個純色，而是一個圖像;否則這是個好主意。 – carmenism 2012-08-13 21:03:17

http://www.webdevout.net/test?01&raw：

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style> 
html { 
    overflow-y: scroll; 
    background: #ff3366; 
    font: 16px serif; 
} 
fieldset { 
    border: 3px solid #ffc2d1; 
} 
legend { 
    background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%; 
    padding: 0 0 0 13px; 
} 
html > /**/ body 
legend { /* if the way it looks in IE8 really bothers you: */ 
    position: relative; 
    right: -13px; 
} 
     </style> 
    </head> 
    <body> 
     <form action="foo"> 
      <fieldset> 
       <legend>Model Forecast Guidance</legend> 
       Fieldset 
      </fieldset> 
     </form> 
    </body> 
</html>

來源

2012-08-13 21:44:01 reisio

回答

相關問題