CSS 텍스트 선택 커서 IE7, 이상한 동작

StackOverflow https://stackoverflow.com/questions/1621132

  •  06-07-2019
  •  | 
  •  

문제

여기서 이상한 사람은 올바른 방향으로 나를 가리키기 위해 피드백을 받기를 바라고 있습니다.

내 #wrapper 또는 자식 DIV 중 하나는 배경색을 적용하지 않으며, IE7은 페이지 주위에 마우스를 뿌릴 때 (텍스트 위로 마시는 지) "텍스트 선택"커서로 정상적인 "포인터"커서를 변경합니다.

나는 문제를 잠시 고치 었다고 생각했지만 내에서 배경색을 제거 할 때 #wrapper 또는 어린이 divs 중 하나 인 문제가 다시 나타납니다.

힌트 나 내가 확인해야 할 것을 찾고 있습니다.

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

편집하다:

Divs가 "Haslayout"이기 때문에 보이지만 여전히 고정하는 방법을 잘 모르겠습니다. 보다 이 링크.

편집 2 :

이 "IE7 버그"에 대한 더 많은 정보를 찾을 수 없습니다. 아이디어가있는 사람 이거나이 버그를 알고 있고 내가 미쳤다는 것을 알 수 있도록 저에게 알려줄 수있는 사람. 나는 Microsoft에 다시 정말로 좌절하고 있습니다. 이번 주에 이미 몇 시간의 일을 더 많이 보냈습니다. 결코 끝나지 않는 것 같습니다.

편집 3 :

여기에 있습니다 다른 링크 같은 문제가있는 사람의.

편집 4 :

stackoverflow.com 이 버그로 고통받습니다! 또한 mashable.com. 나는 많은 웹 개발자들이 사이트 에이 버그를 가지고 있다고 보장하고 그것을 알지 못합니다.

직접 확인하십시오 ... 두 사이트의 페이지 주위에 커서를 가져옵니다. 텍스트 선택 커서로 바뀌지 않아야합니다.

고치기 쉬운 것 같습니다. cursor 속성이지만 문제는 필요할 때 적절한 텍스트 선택-커서 동작을 유발하는 것입니다.

도움이 되었습니까?

해결책

어떤 커서가 어디로 가야하는지 명시 적으로 진술하기에는 너무 해킹 되나요?

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

등..

다른 팁

나는 이전에 그것을 만났다고 확신하지만, 일부 피상적 인 브라우저 테스트에서 실제로 알아 차리는 것은 너무 미묘한 일입니다. 그러나 나는 또한 배경색을 설정함으로써 문제가 해결되었습니다.

내가 알 수있는 한, 그것을 고치는 가장 좋은 방법은 문제를 일으키는 요소를 배치하거나 그 주위에 배치 된 래퍼 디바리를 추가하는 것입니다. 당신은 아마도 사용할 것입니다 position: relative, 그렇지만 absolute 그리고 fixed 작동해야합니다.

요소 자체를 배치하는 것은 일반적으로 작동하지만 래퍼 디브를 추가하면 더 일관되게 작동 할 수 있습니다.

예를 들어 추가 position: relative ~로 .post-text 클래스는이 페이지의 질문과 답변에서 커서를 수정합니다.

투명한 1x1 px gif가 작동하며 또한 훌륭한 수정입니다. 이것 그리고 IE 6에서 8의 다른 버그는 모든 IE에 대한 조건부 의견에 이와 같은 것을 추가 할 것입니다.

* {
    background: url('images/fix1.gif');
}

설정을 시도해 보셨습니까? background-color:transparent; 명시 적으로? 그게 도움이 되나요?

이것은 추악한 해킹처럼 들릴지 모르지만 투명한 1x1 px gif (일명 스페이서)를 배경으로 설정하려고 시도 했습니까?

이것은 완벽하지는 않지만이 작은 예에서는 IE 7에서 효과가있는 것 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

왜 이것이 효과가있는 것처럼 보이는지 모르겠다. 그리고 그것은 확실히 이상적이지 않다. 어떤 이유로 어떤 이유로 P 요소를 상대적으로 배치 된 인라인에 넣으면 마우스 커서가 내가 예상 한 것처럼 더 많이 행동하게 만듭니다.

나는 요소의 계층이있을 때 이것이 더 넓은 의미로 작동한다고 확신하지 못한다.

나는 이것이 완벽한 대답이 아니라는 것을 알고 있지만 다른 아이디어를 촉발시킬 수 있습니다.

Delilah의 솔루션은 약간 단순화 된 것이 저에게 적합하며 Mercator의 문제를 해결합니다.

div { cursor: default; }
div * { cursor: auto; }

문제는 다른 브라우저를 제동하지 않기 위해 다른 CSS 파일을 만들고 조건부 주석을 사용하여 주소를 지정해야한다는 것입니다.

추신 :이 문제는 어두운 배경 웹 사이트에서 매우 성가 시게됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top