CSS文本选择光标ie7，奇怪的行为答案

【问题标题】：CSS text-select cursor ie7, strange behaviorCSS文本选择光标ie7，奇怪的行为
【发布时间】：2012-06-02 10:39:09
【问题描述】：

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

如果我的#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 错误”的更多信息。任何有任何想法的人，或者即使你知道这个错误并且可以让我知道，所以我知道我没有疯。我再次对微软感到非常沮丧。这周已经花费了我几个小时的额外工作时间。似乎永远不会结束。

编辑 3：

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

编辑 4：

STACKOVERFLOW.com 有这个错误！ mashable.com 也是如此。我保证许多 Web 开发人员在他们的网站上都有这个错误，他们甚至都不知道。

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

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

【问题讨论】：

你能举一个活生生的例子吗？我不确定问题出在那些方面...
是的，我刚刚发布的链接上的实时示例。在测试页面下载文件并在ie7中打开以查看第一手资料。
你没疯。并且我发现了其他的 hasLayout 导致的问题，但还没有解决方案。
我发现了这个希望它有所帮助：satzansatz.de/cssd/onhavinglayout.html
试试这些，做第一个（我不太喜欢它，因为它使用了条件注释）：bytesizecss.com/blog/post/fix-haslayout-with-one-line-of-css csscreator.com/node/25082 brunildo.org/test/BackgroundBorderLayout.html

标签： css internet-explorer-7

【解决方案1】：

明确说明哪个光标应该去哪里是不是太老套了？

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

等等。

【讨论】：

这仍然不能完全解决它。然后，文本光标出现在整个块上，例如，包括部分填充的最后一行上的任何填充和空白空间，而不仅仅是实际文本。
同意。好主意，我已经尝试过，但由于 mercator 所引用的原因而没有放弃。
嗯，需要它那个精确，对吗？哦，亲爱的..请参阅我对这个问题的评论，要求提供更多关于推理的信息。

【解决方案2】：

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

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

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

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

【讨论】：

将position: relative; 添加到我的#wrapper 对我没有任何影响。至于包装我的包装器，好吧，我想我宁愿忍受光标的古怪。 =)
很公平。不过，我很好奇，添加额外定位的包装器能解决这个问题吗？

【解决方案3】：

透明的 1x1 像素 GIF 可以正常工作，并且可以很好地修复 This 和 IE 6 到 8 中的其他错误。我会在所有 IE 的条件 cmets 中添加类似的内容：

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

【讨论】：

【解决方案4】：

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

【讨论】：

是的，试过了。不工作。我想我希望有人能给我一些东西给“谷歌”。似乎很奇怪，以前没有多少人经历过。
太糟糕了：我认为透明的“背景”足以防止它发生。我假设你不想要任何背景？否则，您可以通过条件 cmets 在 IE7 样式表中添加一个。似乎是那些没有合适的解决方法的渲染错误之一。（Javascript？）抱歉，我帮不上忙。
是的，到目前为止，我唯一的想法是弄乱我的 CSS 并添加一个与我网站的主要部分匹配的 background-color -- 仅适用于 IE7，哈哈。

【解决方案5】：

这听起来像是一个丑陋的 hack，但您是否尝试过将透明的 1x1 像素 GIF（AKA 间隔）设置为背景？

【讨论】：

没试过，但如果是这样的话，我想我宁愿只设置背景颜色。不过建议很好。

【解决方案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 中会使鼠标光标的行为更像我预期的那样。

尽管存在元素层次结构，但我不确定这是否适用于更广泛的意义。

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

【讨论】：

【解决方案7】：

Delilah 的解决方案，只是稍微简化了一点，对我来说效果很好，也解决了墨卡托的问题。

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

问题是您必须创建另一个 css 文件并使用条件 cmets 来解决它，以免破坏其他浏览器。

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

【讨论】：