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

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

  •  06-07-2019
  •  | 
  •  

题

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

如果我的 #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;
}

修改

似乎是因为divs“hasLayout”，但我仍然不确定如何修复它。请参见此链接。

编辑2：

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

编辑3：

以下是其他链接有同样问题的人。

编辑4：

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

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

似乎很容易使用 cursor 属性修复，但问题是在需要时会触发正确的text-select-cursor行为。

有帮助吗？

解决方案

明确说明光标应该去哪里是不是很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;
}

等。

其他提示

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

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

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

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

透明的1x1 px GIF可以正常使用，也是这个以及IE 6到8中的其他错误。我会在所有IE的条件评论中添加这样的内容：

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

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

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

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

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

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top