CSS文本选择光标IE7，奇怪的行为

Question

CSS文本选择光标IE7，奇怪的行为

cssinternet-explorer-7

6

这里有一个奇怪的问题，希望得到一些反馈指导。

如果我的#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”属性，但我仍然不确定如何修复它。请参见此链接。

编辑2：

我找不到关于这个“ie7 bug”的更多信息。任何人有任何想法，或者即使您知道这个bug并可以让我知道，以便我知道我不是疯了。我再次对微软感到非常沮丧。这已经浪费了我本周的额外几个小时。似乎永远没有尽头。

编辑3：

这里有另一个链接的人遇到了同样的问题。

编辑4：

STACKOVERFLOW.com也遭受了这个bug！mashable.com也是如此。我保证许多web开发人员在他们的网站上遇到了这个bug，他们甚至不知道。

自己检查一下...将光标悬停在两个网站的页面周围。注意当不应该时，它会变成文本选择光标。

看起来可以通过cursor属性轻松修复，但问题是在需要时触发正确的文本选择光标行为。

- Jeff

你能给一个实时的例子吗？我不确定问题是否在那些代码行中... - Roberto Aloi

是的，在我刚刚发布的链接中有一个实时示例。在测试页面上下载文件，然后在ie7中打开它以第一手了解情况。 - Jeff

你并不是疯了。我发现了其他由hasLayout引起的问题，但目前还没有解决方案。 - tahdhaze09

我认为问题在于div已经具有了hasLayout（宽度）。呵呵，这就是问题所在。我需要将其删除。 - Jeff

我不明白，问题出在哪里？为什么光标很重要？ - DisgruntledGoat

显示剩余4条评论

7个回答

1

透明的1x1像素GIF图像能够很好地解决IE 6到8版本中出现的此和其他错误。我会在所有的IE条件注释中添加类似这样的内容：

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

- Miroslav

1

我相信我以前遇到过这个问题，但在一些浏览器测试中可能太微妙了，以至于很难注意到。但我确实也通过设置背景颜色来解决了一些问题。

据我所知，修复它的最佳方法是定位导致问题的元素，或在其周围添加一个定位的包装器div。您最有可能使用position: relative，尽管absolute和fixed也可以工作。

通常定位元素本身就可以解决问题，但添加包装器div可能更加一致。

例如，在.post-text类中添加position: relative可以修复此页面上问题和答案的光标。

- mercator

将 position: relative; 添加到我的 #wrapper 对我没有任何影响。至于包装我的 wrapper，嗯，我想我宁愿接受光标的奇怪行为。 =) - Jeff

好的。不过我很好奇，添加额外的定位包装器是否可以解决它？ - mercator

0

这不是完美的，但对于这个小例子来说，在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中使鼠标光标的行为更像我所期望的。

然而，在元素层次结构下，我不确定这是否具有更广泛的适用性。

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

- Nathan Fox

0

Delilah的解决方案，稍微简化了一点，非常适合我，并且也解决了Mercator的问题。

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

问题在于你必须创建另一个CSS文件，并使用条件注释来解决其他浏览器的兼容性问题。 PS: 在黑色背景网站上，这个问题变得非常烦人。

- puijob

0

你尝试过明确设置background-color:transparent;吗？这样有帮助吗？

- stephenhay

是的，我试过了。不起作用。我想我希望有人能给我一些“谷歌”的东西。似乎很奇怪之前没有多少人经历过这种情况。 - Jeff

很遗憾：我以为透明度足以成为“背景”，以防止这种情况发生。我猜你不想要任何背景？否则，你可以通过条件注释在IE7样式表中添加一个背景。似乎这是一种没有合适解决方法的渲染错误。（JavaScript？）很抱歉我无法提供帮助。 - stephenhay

是的，我目前唯一的想法就是搞乱我的CSS，并设置一个与我的网站主体颜色相匹配的background-color -- 只针对IE7，哈哈。 - Jeff

0

这可能听起来像是一个丑陋的黑客，但你是否尝试将一个透明的1x1像素GIF（也称为spacer）设置为背景？

- Seb

没试过那个，但如果真的需要的话，我想我宁愿设置一个背景颜色。不过还是谢谢你的建议。 - Jeff

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoe · Accepted Answer

明确指定光标应该放在哪里，这样做是否太过投机取巧？

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

etc..