Question

当我尝试通过注释掉它们之间的空白来消除我的按钮之间的间隙时，会出现这些小的黑色破折号，可以使用标签按钮进行选择。我可以使用text-decoration: false使它们不可见，我可以使用margin-left: -4px删除间隙，但无论它是什么仍然存在并在使用标签按钮时被选中。

为什么这些破灭，我如何摆脱它们？

HTML：

<a target="_blank" a href= "https://Google.com">
<button class="button">
<strong>LinkedIn</strong><br>
</button></a><!--
--><a target="_blank" a href= "https://www.Google.com">
<button class="button">
<strong>GitHub</strong><br>
</button></a>
<br><!--
--><a target="_blank" a href= "https://www.Google.com">
<button class="button">
<strong>Stack Overflow</strong><br>
</button></a><!--
--><a target="_blank" a href= "https://www.Google.com">
<button class="button">
<strong>HackerRank</strong><br>
</button></a>

CSS：

div{
    display: inline-block;
    white-space: normal;
    height: 623px;
    padding: 10px;
    padding-top: 0;
    padding-left: 0;    
    vertical-align: top;
    border-bottom: 3px solid black;
    border: 1px solid black;
  width: 500px;
}

.button{
    background-color: rgb(224,184,219);
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    width: 160px;
    height: 100px;
    transition-duration: 0.2s;
    -webkit-transition-duration:0.2s;
    cursor: pointer;
    outline: none;
}
.button:hover{
    background-color: white;
    color: rgb(224,184,219);
    outline: none;
}
:focus, :visited{
    border: 2px solid rgb(153,217,234);
    outline: none;
    outline: 0;
}

JSFiddle： https://jsfiddle.net/mpbev9ay/1/

Answer 1

您不应将<button>元素放入<a>元素中。它们都是交互式控件，因此禁止将它们嵌套在一起。

W3C定义了<a>的内容模型（即内部可以包含的内容）

透明，但必须没有interactive content后代。

其中

互动内容是专门用于用户互动的内容。

a，音频（如果存在控件属性），按钮，详细信息，嵌入，iframe，img（如果存在usemap属性），输入（如果type属性不在隐藏状态），keygen，label，menu（如果type属性处于工具栏状态），object（如果usemap属性存在），select，textarea，video（如果controls属性存在））

（强调我的）

因此，解决方案是重新排列HTML，以便不再发生这种情况。

Answer 2

如果您使用浏览器检查器（例如在Chrome中），则可以使用排除过程来确定线路的来源。据我所知，它是在a元素内但在button元素之前的换行符。

一些建议：

注释掉所有新行/空格，而不仅仅是你已经做过的几行
在text-decoration: none;元素而不是a元素上使用button
使用font-size: 0;元素上的a，然后font-size: 1rem;上的button

Answer 3

您还需要注释掉<a>和<button>之间的空白区域，如下所示。

＆＃13;

div{
display: inline-block;
white-space: normal;
height: 623px;
padding: 10px;
padding-top: 0;
padding-left: 0;	
vertical-align: top;
border-bottom: 3px solid black;
border: 1px solid black;
width: 500px;
}

.button{
background-color: rgb(224,184,219);
border: 2px solid white;
border-radius: 10px;
color: white;
display: inline-block;
font-size: 16px;
text-decoration: none;
text-align: center;
padding: 10px;
width: 160px;
height: 100px;
transition-duration: 0.2s;
-webkit-transition-duration:0.2s;
cursor: pointer;
outline: none;
}
.button:hover{
background-color: white;
color: rgb(224,184,219);
outline: none;
}
:focus, :visited{
border: 2px solid rgb(153,217,234);
outline: none;
outline: 0;
}

＆＃13;

<a target="_blank" href= "https://Google.com"><!--
--><button class="button">
<strong>LinkedIn</strong><br>
</button></a><!--
--><a target="_blank"  href= "https://www.Google.com"><!--
--><button class="button">
<strong>GitHub</strong><br>
</button></a>
<br><!--
--><a target="_blank"  href= "https://www.Google.com"><!--
--><button class="button">
<strong>Stack Overflow</strong><br>
</button></a><!--
--><a target="_blank"  href= "https://www.Google.com"><!--
--><button class="button">
<strong>HackerRank</strong><br>
</button></a>

＆＃13;

或者您可以在onclick上使用<button>，如下所示

＆＃13;

div{
display: inline-block;
white-space: normal;
height: 623px;
padding: 10px;
padding-top: 0;
padding-left: 0;	
vertical-align: top;
border-bottom: 3px solid black;
border: 1px solid black;
width: 500px;
}

.button{
background-color: rgb(224,184,219);
border: 2px solid white;
border-radius: 10px;
color: white;
display: inline-block;
font-size: 16px;
text-decoration: none;
text-align: center;
padding: 10px;
width: 160px;
height: 100px;
transition-duration: 0.2s;
-webkit-transition-duration:0.2s;
cursor: pointer;
outline: none;
}
.button:hover{
background-color: white;
color: rgb(224,184,219);
outline: none;
}
:focus, :visited{
border: 2px solid rgb(153,217,234);
outline: none;
outline: 0;
}

＆＃13;

<button class="button" onclick="window.open('https://Google.com','_blank')">
<strong>LinkedIn</strong><br></button><!--
--><button class="button" onclick="window.open('https://Google.com','_blank')">
<strong>GitHub</strong><br>
</button><br><!--
--><button class="button" onclick="window.open('https://Google.com','_blank')">
<strong>Stack Overflow</strong><br>
</button><!--
--><button class="button" onclick="window.open('https://Google.com','_blank')">
<strong>HackerRank</strong><br>
</button>

＆＃13;

注释掉空格

3 个答案: