Question

我遇到了一个特殊的问题。

我的页面上的某些HTML文字变得无法选择，并且在悬停时无法识别其锚点后代（在Chrome中测试）。

您必须满足某些要求才能使其发生。这是我的示例页面：

http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/

如果您将浏览器窗口宽度减小到小于520px（因此我的@media css启动），您将无法再突出显示或选择主体文本中的链接。

任何人都可以看到导致这种情况的原因吗？

Answer 1

<div id="sidebar>"在页面大小减小时与#main div重叠。

将z-index:100添加到#main

#main {
padding-top: 0.5em;
z-index: 100;
}

Answer 2

用户选择：文本！important;

这可以帮助您。

Answer 3

当您将浏览器窗口宽度缩小到小于520px时，#sidebar落在#main之上，导致无法从#sidebar中选择某些内容。在您的#main上添加z-index。

Answer 4

对于发现此页面研究类似问题的任何人，如果您使用html5boilerplate.com中的HTML5样板文件，则包含的某些CSS可能会导致您在白色背景上显示的内容文本在您选择时不会突出显示。特别是应该调整或删除“:: selection”的CSS。

Answer 5

确保css属性为position：static;
或者删除其他位置属性主要是“相对” 当前div旁边的div（你试图选择的文本）搞乱了所有的东西。

Answer 6

如果你有一个元素的填充，然后你将另一个元素绝对放在第二个元素的填充内，你就会遇到这个问题。

#container .list li .list-left-left {
            width: 120px;
            position: absolute;
            padding-left: 10px;
        }

        #container .list li .list-left {
            width: 240px;
            position: absolute;
            padding-left: 165px; 
        }

解决方案是使用margin-left而不是左边填充。

Answer 7

对于无法标记文本的问题，请检查是否有人没有使用javascript故意阻止此操作，例如：

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

Answer 8

我刚刚遇到了这个问题，我发现这是因为我做了一个永远专注的输入。

因此，检查您的代码是否有类似的内容。它会中断其他元素的突出显示。

<input onblur="this.focus()" type="text" id="calInput" autofocus/>

无法选择html文本

8 个答案: