CSS를 사용하여 텍스트 링크를 "Buy-It"버튼으로 대체하십시오. a.class 숨겨진하지만 a.class : 보이기 전에. IE에서 작동하지 않습니다. 왜?

나는 CSS를 사용하여 텍스트 링크를 "Buy-It"버튼으로 대체합니다. 그것은 파이어 폭스에서 작동하지만 IE에서는 작동하지 않습니다. 왜 둘 모두에서 작동하지 않아야하는지 알 수 없습니다.CSS를 사용하여 텍스트 링크를 "Buy-It"버튼으로 대체하십시오. a.class 숨겨진하지만 a.class : 보이기 전에. IE에서 작동하지 않습니다. 왜?

다음은 HTML입니다 :

<p> 
    <a href="..." 
     class="doclink"> 
    text_of_link 
    </a> 
</p>

그리고 여기에 CSS의 :

CSS는 당신의 표적 브라우저에서 지원되지 않는 경우

/* Replace the text link with a buy-it button 
*/ 
div.item-page p a.doclink  
    { display: block; visibility:hidden; } 
div.item-page p a.doclink:before 
    { content: "Buy Now!"; visibility:visible; 
     display: block; 

     text-align: center; color: #ffffff; 
     font-weight: normal; font-size:18px; letter-spacing:2px;   
     font-style:italic; 
     font-family:tahoma,helv,arial; 
     background: #13357a; border-radius: 5px; padding:15px; 
     width: 150px; 

     float: right; 
     margin: 0 0 15px 6px; 
    } 
div.item-page p a.doclink:after /* to clear the float, if any */ 
    { content: ""; 
     display: block;  
     clear: both; 
    }

출처

2014-10-12 Trupod

버전? IE8 +에서만 지원됩니다 : http://caniuse.com/#feat=css-gencontent –

기본 요소가 "표시"되면 ': before'부분을 숨길 수 있는지 확인 했습니까? 나는 그렇게 생각하지 않는다. 'display'와 같습니다. 기본 요소가'display : none'이라면': before' 부분이'display' 속성에 상관없이 숨겨져있을 것이라고 생각합니다. –

응답 해 주셔서 감사합니다. 저는 MSIE 11을 사용하고있었습니다. 표준에 따르면, 의사 요소는 요소와 독립적으로 스타일을 지정할 수 있어야합니다. MSIE가 :: before를 전달한 Microsoft 개발자 네트워크 설명에 따르면 그렇습니다. 독립적으로 스타일을 지정할 수 있어야합니다. 게시 이후 IE 버그임을 알게되었습니다. 다른 모든 브라우저 (Chrome, Safari, Firefox 등)에서는 작동합니다. MSIE 10 & 11 모두에서 MS의 :: 사양에도 불구하고 그렇지 않습니다. – Trupod

, 당신은 동일한 기능을 달성하기 위해 자바 스크립트를 사용할 수 있습니다. 여기

간단한 예 : IE의

http://jsbin.com/carazahiguta/1/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script> 
    function init() { 
     var elms = document.querySelectorAll('.doclink'); 
     for(var i = 0; i < elms.length; i++) { 
      var item = elms[i]; 
      item.innerHTML = 'Buy Now'; 
     }; 

    } 


    </script> 
</head> 
<body onload="init()"> 
<p> 
    <a href="..." 
     class="doclink"> 
    text_of_link 
    </a> 
</p> 
    <p> 
    <a href="..." 
     class="doclink"> 
    text_of_link 
    </a> 
</p> 
    <p> 
    <a href="..." 
     class="doclink"> 
    text_of_link 
    </a> 
</p> 
</body> 
</html>

출처

2014-10-13 07:10:01 GibboK

깁 부크 감사합니다. 그 좋은 해결 방법입니다. 누구든지 내게 조언 할 수 있습니다 : CSS를 그대로 유지하고 브라우저 테스트를 자바 스크립트에 추가하여 IE에서만 활성화하는 것이 더 좋습니까? 아니면 CSS를 잊어 버리고 모든 방문자에게 자바 스크립트를 남길 수도 있습니까? – Trupod

JavaScript 방식을 사용합니다. 더 쉬운 방법으로 문제를 해결할 수 있으며 브라우저 유형을 확인할 필요가 없습니다. – GibboK

CSS를 사용하여 텍스트 링크를 "Buy-It"버튼으로 대체하십시오. a.class 숨겨진하지만 a.class : 보이기 전에. IE에서 작동하지 않습니다. 왜?

답변

관련 문제