Question

这里很奇怪，希望得到一些反馈，指出我正确的方向。

如果我的#wrapper或任何子div没有应用背景颜色，ie7将鼠标左右的光标改变为“文本选择”光标（无论是否将鼠标移到文本上还是没有。）

我以为我已经修复了这个问题，但是当我从#wrapper或任何子div中删除背景颜色时，问题又重新出现了。

只是寻找一些提示或我应该检查的内容。

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

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

修改

似乎是因为div“hasLayout”，但我仍然不确定如何解决它。见this link.

编辑2：

我找不到关于这个“ie7 bug”的更多信息。有任何想法的人，或者即使你知道这个bug，也可以让我知道所以我知道我并不疯狂。我再次对微软感到非常沮丧。本周已经花了我额外的几个小时的工作。好像它永远不会结束。

编辑3：

这是another link遇到同样问题的人。

编辑4：

STACKOVERFLOW.com遭受这个错误！ mashable.com也是如此。我保证很多网络开发者在他们的网站上都有这个错误，他们甚至都不知道。

自己检查一下......将光标悬停在任一站点的页面上。请注意，它不会变为文本选择光标。

似乎很容易使用cursor属性进行修复，但问题是在需要时会触发正确的文本选择游标行为。

Answer 1

明确说明光标应该去哪里是不是很hacky？

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;
}

等。

Answer 2

我很确定我以前遇到过它，但在一些表面浏览器测试中，它可能有点太微妙而无法真正注意到。但我当然也通过设置背景颜色来修复问题。

据我所知，修复它的最佳方法是定位导致问题的元素，或者在它周围添加一个定位的包装器div。您很可能会使用position: relative，但absolute和fixed也应该有效。

定位元素本身通常有效，但添加包装div可能会更加一致。

E.g。将position: relative添加到.post-text类会将光标固定在此页面上的问题和答案中。

Answer 3

透明的1x1 px GIF可以工作，也是{6}中的This和其他错误的绝佳修复。我会在所有IE的条件注释中添加类似这样的内容：

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

Answer 4

您是否尝试过明确设置background-color:transparent;？这有帮助吗？

Answer 5

这可能听起来像一个丑陋的黑客，但你试过设置一个透明的1x1 px GIF（AKA spacer）作为背景吗？

Answer 6

这并不完美，但对于这个小例子，它似乎适用于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元素放在内联相对定位的div中会使鼠标光标的行为更像我期望的那样。

我不确定这是否在更广泛的意义上有效，尽管存在元素的层次结构。

我意识到这不是一个完美的答案，但它可能会激发其他想法。

Answer 7

Delilah的解决方案，只有一点点简化对我来说很有用，也解决了墨卡托的问题。

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

问题是你必须创建另一个css文件并使用条件注释来解决它而不是制止其他浏览器。

PS：这个问题在深色背景网站上变得非常烦人。

CSS文本选择游标ie7，奇怪的行为

7 个答案: