无法选择html文本答案

【问题标题】：Can't select html text无法选择html文本
【发布时间】：2021-04-11 20:30:54
【问题描述】：

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

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

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

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

如果您将浏览器窗口宽度减小到小于 520 像素（所以我的 @media css 开始起作用），您将无法再突出显示或选择正文中的链接。

谁能看出是什么原因造成的？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

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

将z-index:100 添加到#main

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

【讨论】：

谢谢，z-index 为 1 就足够了。

【解决方案2】：

用户选择：文本！重要；

这可以帮助你谢谢。

【讨论】：

【解决方案3】：

当您将浏览器窗口宽度减小到小于 520 像素时，您的 #sidebar 就会超过您的 #main，这使得您无法从 #sidebar 中选择某些内容。在您的#main 上放置一个 z-index。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

#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 而不是 padding left。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：