Question

我在作为背景之一的背景图片下使用了h2标记，标记只有几个&nbsp，因此不存在任何内容。

但是，如果我点击它两次，足够快，它会突出显示它，好像文本实际上在那里，我该怎么做才能防止这种情况？

Answer 1

您不应该使用h2作为按钮。它用于定义标题，用于定义文档的结构。

如果您想要一个实际上是图像的按钮，请执行以下操作：

<button id="myButton">Do something</button>

#myButton {
    width: 50px; height: 20px; //the dimensions of your image
    background: url(myimage.png); //the URL of your image
    border: none; //hiding default button borders
    text-indent: -999em; //hiding the default text
}

可访问性需要默认文本。有屏幕阅读器的人应该知道你的按钮做了什么。这样你还可以保留按钮的其他有用属性（比如有一个tabindex，能够获得焦点等）。

Answer 2

请查看Tim Down's great answer。

引用：

在大多数浏览器中，这可以使用CSS实现：
*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
对于IE＆lt; 10和Opera，您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性设置此项：
<div id="foo" unselectable="on">...</div>
遗憾的是，此属性未被继承，这意味着您必须在<div>内的每个元素的开始标记中放置一个属性。如果这是一个问题，您可以使用JavaScript以递归方式为元素的后代执行此操作：
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Answer 3

代替（ab）使用h2标签填充 来创建间隙，您应该找到更好的方法来达到预期的效果。

您图片上的margin-bottom也许会产生同样的效果吗？

防止突出显示html h2标记

3 个答案: