선택/옵션, IE에서 잘못된 커서

텍스트가 잘못되었을 때 옵션에 잘못된 커서가있는 문제가 있습니다.선택/옵션, IE에서 잘못된 커서

일반적으로이 옵션은 "기본"커서를 사용하지만 예를 들어. 단락은 IE에서 "텍스트"커서를 볼 수 있습니다.

코드 : IE11에서

<form> 
    <select> 
     <option value=a selected="selected">First 
     <option value=b>Second 
     <option value=c>Third 
     <option value=c>Fourth  
    </select> 
    <p>text</p> 
</form>

오기 '나는 오래된 사람이 동일하게 생각합니다.

나는 위치를 설정하려고했다 : 상대와 z- 색인을 선택하고, 옵션과 단락을 선택하고, 옵션을 선택하는 것이 중요하지만 해결 방법이없는 상황은 동일하다.

아이디어가 있으십니까?

출처

2014-05-14 Roman

또한이 문제를 점점 . – Patrick

방금 다른 질문에 대한 연구를하는이 질문을 발견했습니다. bazzag의 대답으로 제시된 JS 솔루션이 효과가있을 수도 있지만 다소 복잡하다는 것을 알았 기 때문에 HTML 및 CSS 만 사용하는 간단한 해결 방법을 시도했습니다. 이 질문을 읽고 관심이 있으시면 http://stackoverflow.com/a/27911805/1427878 – CBroe

-1

</select>으로 선택 태그를 닫았지만 여전히 옵션을 닫아야합니다. 현재 브라우저는 다음을 모두 읽습니다 : <option value=a selected="selected"> 단일 옵션으로.

랩 </option>와 모든 옵션 - 그것은 다음과 같아야합니다

<form> 
    <select> 
     <option value=a selected="selected">First</option> 
     <option value=b>Second</option> 
     <option value=c>Third</option> 
     <option value=c>Fourth</option> 
    </select> 
    <p>text</p> 
</form>

출처

2014-05-28 07:10:12 Jacob

아니요, 끝 옵션 태그는 선택 사항이며 해당 HTML 코드는 같습니다. 답변을 작성하기 전에 시도해야합니다;) – Roman

IE가 선택 객체의 z 인덱스를 공경하고 기본 객체의 커서 속성을 적용하지 않습니다.

나는 모든 기본 객체의 커서 속성을 select 객체의 onfocus 이벤트에서 포인터로 변경하고 select 객체의 onblur 이벤트에서이를 복원하여이 문제를 해결합니다.

IE가 올바르게 처리하지 못하는 것은 실망 스럽습니다. 대부분의 다른 브라우저와 마찬가지입니다. (DavidG의 요청에 따라)

예제 코드 :이 예에서

우리는 드롭 다운은 항상 아래로 확장되지 않습니다 NB (선택 드롭 다운에 포함 할 모든 요소에 'underselect'의 클래스를 적용 위쪽으로 확장 할 수 있음).

'underselect'클래스가있는 각 요소의 초기 커서 속성은 해당 요소의 특성 'ic'에 저장됩니다.

select 요소의 focus 이벤트는 'underselect'클래스가있는 모든 요소의 커서를 포인터로 설정하는 함수에 바인딩됩니다.

select 요소의 blur 이벤트는 'underderselect'클래스가있는 모든 요소의 커서를 페이지로드에 저장된 초기 값으로 설정하는 함수에 바인딩됩니다. 자바 스크립트를 사용 JQuery와

$(function() 
{ 
    $("#select") 
    .bind("focus", function(){ $(".underselect").each(function(){$(this).css("cursor", "pointer") }); }) 
    .bind("blur", function(){ $(".underselect").each(function (i){$(this).css("cursor", $(this).data("ic")); }) }); 

    $(".underselect").each(function() { $(this).data("ic", $(this).css("cursor")); }); 
});

를 사용

만 우리는 다음과 같은 기능을 만들 : 여는 태그

function saveinitialcursor() 
{ 
    gp = document.getElementsByClassName("underselect"); 
    for (var i = 0, l = gp.length; i < l; i++) 
    { 
    style = getComputedStyle(gp[i]); 
    cursor = style.getPropertyValue("cursor"); 
    gp[i].setAttribute("ic", cursor); 
    } 
} 

function selectfocus() 
{ 
    gp = document.getElementsByClassName("underselect") 
    for (var i = 0, l = gp.length; i < l; i++) 
    gp[i].style.cursor = "pointer"; 
} 

function selectblur() 
{ 
    gp = document.getElementsByClassName("underselect") 
    for (var i = 0, l = gp.length; i < l; i++) 
    gp[i].style.cursor = gp[i].getAttribute("ic"); 
}

을 몸에 바인딩 선택 :

<body onload="saveinitialcursor()" > 

<select id="select" onblur="selectblur()" onfocus="selectfocus()" >

출처

2014-05-29 22:30:04 bazzag

어떻게 수행했는지 예를 게시 할 수 있습니까? 아마 jsfiddle.net에? – DavidG

선택/옵션, IE에서 잘못된 커서

답변

관련 문제