为什么在 Firefox 中单击 css- 网格区域时整个网站都突出显示？
Why is the whole website highlighted when I click on the css-grid area in Firefox?
这只发生在 Firefox（和 TOR）中。
这是我的代码：
#main {
display: grid;
grid-gap: 8px;
justify-content: center;
margin-top: 0.25rem;
}
.box,
.empty_box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #DDDDDD;
border-radius: 12px 12px 12px 12px;
display: -moz-box;
float: left;
cursor: pointer;
}
.box_link {
text-decoration: underline;
font-size: 1em;
color: #000000;
margin: auto;
}
@media(max-width: 379px) {
.box {
font-size: 22px;
width: 100%!important;
padding: 10px 0px 90px 0px;
display: grid;
grid-gap: 4px;
grid-template-areas: "i t";
margin: 0px 2px 0px 2px;
}
.box_link {
text-align: right;
margin-right: 14px;
}
.box_inner {
margin-left: 8px;
}
}
@media screen and (min-width: 380px) {
#main {
grid-row-gap: 38px;
grid-template-columns: repeat(3, 114px);
}
.box {
display: grid;
grid-gap: 4px;
grid-template-areas: "i" "t";
text-align: center;
height: 114px!important;
width: 114px!important;
padding-top: 6px;
padding-left: 6px;
}
.box_inner,
.box_inner img {
height: 100px!important;
width: 100px!important;
}
.box:hover,
.empty_box:hover {
-webkit-box-shadow: 0px 0px 12px 3px #A1D6FF;
-moz-box-shadow: 0px 0px 12px 3px #A1D6FF;
box-shadow: 0px 0px 12px 3px #A1D6FF;
}
}
@media screen and (min-width: 498px) {
#main {
grid-template-columns: repeat(4, 114px);
}
}
@media screen and (min-width: 624px) {
#main {
grid-template-columns: repeat(5, 114px);
}
}
@media screen and (min-width: 746px) {
#main {
grid-template-columns: repeat(6, 114px);
}
}
@media screen and (min-width: 868px) {
#main {
grid-template-columns: repeat(7, 114px);
}
}
@media screen and (min-width: 980px) {
#main {
grid-template-columns: repeat(8, 114px);
}
}
@media screen and (min-width: 1280px) {
#main {
grid-column-gap: 12px;
}
}
@media screen and (min-width: 1680px) {
#main {
grid-template-columns: repeat(8, 133px);
grid-column-gap: 18px;
}
.box {
height: 133px!important;
width: 133px!important;
}
.box_inner,
.box_inner img {
height: 118px!important;
width: 118px!important;
}
}
<div id="all">
<div id="main" style="background-color: rgb(223, 223, 223);">
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
</div>
</div>
https://jsfiddle.net/alphatier/csuk0km7/
例如，请点击 div 旁边的区域。我不明白为什么我这样做时所有内容都突出显示。
我发现这只是因为 css-grid.
一切正常，没有..
display: grid;
.. 但是，我的结构被破坏了。我想使用 css-grid，但我不想要不必要的突出显示...
使用Grid、Flexbox等CSS3技术时，确实没有必要使用浮动。这些新布局系统背后的想法是提供比浮动更好的方法。因此，您可以删除已应用于网格布局的 float: left。这也恰好解决了Firefox的高亮问题
我不明白你为什么要将 float 与 flexbox.Remove 一起使用，而且它会起作用。
为了回答您的问题，如果您不介意用户无法突出显示内容，您可以使用以下内容css：
#main {
display: grid;
grid-gap: 8px;
justify-content: center;
margin-top: 0.25rem;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
如果您愿意，您可以只将此规则用于 Firefox。
这只发生在 Firefox（和 TOR）中。
这是我的代码：
#main {
display: grid;
grid-gap: 8px;
justify-content: center;
margin-top: 0.25rem;
}
.box,
.empty_box {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #DDDDDD;
border-radius: 12px 12px 12px 12px;
display: -moz-box;
float: left;
cursor: pointer;
}
.box_link {
text-decoration: underline;
font-size: 1em;
color: #000000;
margin: auto;
}
@media(max-width: 379px) {
.box {
font-size: 22px;
width: 100%!important;
padding: 10px 0px 90px 0px;
display: grid;
grid-gap: 4px;
grid-template-areas: "i t";
margin: 0px 2px 0px 2px;
}
.box_link {
text-align: right;
margin-right: 14px;
}
.box_inner {
margin-left: 8px;
}
}
@media screen and (min-width: 380px) {
#main {
grid-row-gap: 38px;
grid-template-columns: repeat(3, 114px);
}
.box {
display: grid;
grid-gap: 4px;
grid-template-areas: "i" "t";
text-align: center;
height: 114px!important;
width: 114px!important;
padding-top: 6px;
padding-left: 6px;
}
.box_inner,
.box_inner img {
height: 100px!important;
width: 100px!important;
}
.box:hover,
.empty_box:hover {
-webkit-box-shadow: 0px 0px 12px 3px #A1D6FF;
-moz-box-shadow: 0px 0px 12px 3px #A1D6FF;
box-shadow: 0px 0px 12px 3px #A1D6FF;
}
}
@media screen and (min-width: 498px) {
#main {
grid-template-columns: repeat(4, 114px);
}
}
@media screen and (min-width: 624px) {
#main {
grid-template-columns: repeat(5, 114px);
}
}
@media screen and (min-width: 746px) {
#main {
grid-template-columns: repeat(6, 114px);
}
}
@media screen and (min-width: 868px) {
#main {
grid-template-columns: repeat(7, 114px);
}
}
@media screen and (min-width: 980px) {
#main {
grid-template-columns: repeat(8, 114px);
}
}
@media screen and (min-width: 1280px) {
#main {
grid-column-gap: 12px;
}
}
@media screen and (min-width: 1680px) {
#main {
grid-template-columns: repeat(8, 133px);
grid-column-gap: 18px;
}
.box {
height: 133px!important;
width: 133px!important;
}
.box_inner,
.box_inner img {
height: 118px!important;
width: 118px!important;
}
}
<div id="all">
<div id="main" style="background-color: rgb(223, 223, 223);">
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
<a href="http://localhost:3000/sp/r/2">
<div class="box ui-droppable" data-boxid="2" style="width: 100px; height: 100px; background-color: #FFFFFF">
<div class="box_inner box_pic ui-draggable ui-draggable-handle" id="qrcode2" style="margin-bottom: 4px; width: 100px; height: 100px; position: relative; z-index: auto;" title="http://facebook.com">
<canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOElEQVR4nO3VSW7EMAxEUd3/0sk2ncRtlaoo0ehPQCsNHJ4BjzHG1671O9Tzd/fVffX9TQsQQACZA0mHOzAXvLo+NwAJ1+cGIOH63AAkXJ8bMog7kPTA3ffc+qrnAwgggAACyHxD6YG6+dx9QAABpHI+gACi7bv1VNcHCCCAAPImPh7EDXXgu++nPxi3PkAA6XUfkGb324NUr90DS+9vWoAA0nTggDxsf8v6U0XjSH8Ad+dPRI8qJgOQZgFIs/gIEKWg6h9aOp/bj3o/VD8ggAACyGNAKhNGCty4VICKfIAA0ncB0my1A3EHrO6773X/INR+xxiAACIU6A7UvQ8IINmf+ulwQdL5l1aywdMBCCDS+4Dc7D8eRG0gPQC1OfW96vqn3pcvAALI7HuArCQE5O79+YSnB7LYYKzedH0XZwABZLJAQACR4jiImuD0wN16Di1AAAEEkEeCuANTB5oe+O78RR8AIKv5AQEEkFYgagK3QTefet8FcN+/qBkQQAAB5DEgcpfBqAY+Db5yHhBAfiQH5O8ZuYpgAPLvGa/JyoGo76lxur6Le4AAsqlhdSC76wPEzJ+u7xYkHW5D1QNzgV2AizOAAHKxDwggzwI5PTC1wW5rsX5AAAEEEEACIGqD6vvu+aJ+AVk9X9QvIKvni/oFZPV8Ub/nQNIDTA+o+jwgxQN25wcIIO8DkBsQN1yQ0/nTHyQggGQHcjo/IIC8glQvt2B3oO55Nf9ivYAAMjkQQAABBJDX9Q1NSIF+JJyzxQAAAABJRU5ErkJggg=="></div>
<span class="box_link" style="font-size: 1em;" title="Facebook">
Facebook
</span>
</div>
</a>
</div>
</div>
https://jsfiddle.net/alphatier/csuk0km7/
例如，请点击 div 旁边的区域。我不明白为什么我这样做时所有内容都突出显示。
我发现这只是因为 css-grid.
一切正常，没有..
display: grid;
.. 但是，我的结构被破坏了。我想使用 css-grid，但我不想要不必要的突出显示...
使用Grid、Flexbox等CSS3技术时，确实没有必要使用浮动。这些新布局系统背后的想法是提供比浮动更好的方法。因此，您可以删除已应用于网格布局的 float: left。这也恰好解决了Firefox的高亮问题
我不明白你为什么要将 float 与 flexbox.Remove 一起使用，而且它会起作用。
为了回答您的问题，如果您不介意用户无法突出显示内容，您可以使用以下内容css：
#main {
display: grid;
grid-gap: 8px;
justify-content: center;
margin-top: 0.25rem;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
如果您愿意，您可以只将此规则用于 Firefox。