텍스트 장식 : IE에서 라인 스루가 작동하지 않습니까?

Question

나는 내 <select>에서 <option>의를 해제하고이 클래스를 추가합니다, 내 disable()가 호출이

.strike{ 
    text-decoration: line-through; 
} 

모든 시간이 있지만 IE에서 작동하지 않습니다. 예, 내 <option>은 잘 작동하지 않지만 IE에서는 텍스트 장식이 실패합니다. 이것에 대한 해결 방법은 무엇입니까? 감사.

편집 : 방금 텍스트 장식 : 라인 스루가 Chrome에서도 작동하지 않는다는 것을 알았습니다.

Answer 1

까다 롭고 한 픽셀 배경을 텍스트 div에 추가 할 수 있습니다. 이것은 적어도 미래의 증거이며 모든 브라우저에서 작동합니다.

Answer 2

select 요소를 스타일링하기위한 옵션은 거의 없습니다. 사용 가능한 옵션 및 제한 사항을 보여주는 support grid이 있습니다.

CSS를 사용하여 선택 양식 컨트롤의 스타일을 지정하는 대신 다른 방법으로 '선택'을 시뮬레이션하는 것이 좋습니다 (example).

다음

Answer 3

,이 시도 :

<p>Bla bla bla <span class="strike">RAAAAAA!</span></p> 

과 :

span.strike{ 
    position: relative; 
    text-align: center; 
    z-index: 1;  
} 

span.strike:before { 
    border-top: 1px solid #000; 
    content:""; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    z-index: -1; 
} 

편집 : 오의는 선택을. 신경 쓰지 마.

Answer 4

일반적으로 option 요소는 스타일링에 많은 제한이 있습니다. 렌더링은 여전히 ​​시스템의 기본 제공 루틴을 기반으로하고 있으며 이러한 루틴은 종종 CSS로 제어 할 수 없기 때문입니다. Overstriking은 보통 작동하지 않습니다. 간단한 정적 예제 <select><option style="text-decoration: line-through">Hello world</select>으로 테스트 할 수 있습니다. (호기심으로, 파이어 폭스는 라인 스루를 사용하지만 초기 상태에서는 초기에 선택했던 옵션을 사용하지 않습니다.)

다른 방법을 사용해보십시오. 옵션을 선택할 수없는 경우 그냥 제거하지 않는 것이 좋습니다. CSS로 요소를 숨기는 것은 잘 작동하지 않습니다.

또는 disabled 속성을 true으로 설정하십시오. 이렇게하면 선택되지 않으며 인기있는 브라우저에서는 회색 텍스트로 표시됩니다.

Answer 5

여기,이

<select> 
    <option selected> Size - </option> 
    <option class="disabledoption">Short Option</option> 
    <option class="disabledoption">This Is </option> 
    <option class="disabledoption">dssdsd Is </option> 
    <option class="disabledoption">yes </option> 
    <option class=>ertyu </option> 
    <option class=>gsdgsdf </option> 
</select> 

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    uni = '\u0336'; 
    jQuery('.disabledoption', this).each(function(index, element) { 
     uni = '\u0336'; 
     var result = strikeString(jQuery(this).html(), uni); 
     jQuery(this).html(result); 
    }); 
    }); 
    function strikeString(str, strikeKind) { 
     var result = ''; 
     for (var i = 0; i < str.length; i++) { 
      var c = str.charAt(i); 
      var r = c+strikeKind; 
      result += r; 
     } 
    return result; 
} 
</script>