href链接按钮的边框样式在chrome中不显示答案

【问题标题】：border style of href link button is not displayed in chromehref链接按钮的边框样式在chrome中不显示
【发布时间】：2016-07-31 15:57:58
【问题描述】：

href 链接按钮的边框样式在 Chrome 浏览器中不显示。本期代码如下：

.link_button
{
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}

input[type=submit], .link_button
{
	text-decoration: none;
	padding: 1px 6px;
	border: 10px solid red;
	color: #000000;		
	background-color: #DDDDDD;
}

<p>
<a href="loaddata/" class="link_button">Go back for a new text</a>
</p>

<form action="loaddata/" method=get>
	<input type="submit" value="Go back for a new text">
</form>

以下是 Chrome 浏览器 (v.47) 呈现此代码的方式：

如图所示，href 链接按钮周围没有实心红色边框。输入按钮有这些边框。

同时，Firefox (v.42) 为两种类型的按钮呈现相同的代码，并带有纯红色边框：

问题是为什么Chrome在href链接按钮的情况下不产生边框？怎么解决？

【问题讨论】：

display: inline-block
@StephenThomas - 这没有帮助。

标签： html css google-chrome button hyperlink

【解决方案1】：

请试试这个：

用轮廓代替边框：

input[type=submit], .link_button
{
    text-decoration: none;
    padding: 1px 6px;
    outline: 10px solid red;
    color: #000000;     
    background-color: #DDDDDD;
}

【讨论】：

这个问题是关于一个边框样式的案例。 outline 解决方法不适合我。

【解决方案2】：

appearance 属性旨在将元素呈现为浏览器原生元素。使用谷歌浏览器时，他们将button 边框设置为2px outset buttonface。使用 appearance 属性时不能覆盖此属性。

但是，要在.link_button 周围实现红色边框，请使用：

box-shadow: 0px 0px 0px 10px red;

而不是border: 10px solid red;

【讨论】：

好的，谢谢。然而，这只适用于特殊情况bold-style: solid;，但这不适用于一般情况，比如bold-style: outset;

【解决方案3】：

请试试这个，它对你来说非常好，

a
{
color: #000000; 
background-color: #DDDDDD; 
border: 10px solid red;
padding: 1px 6px;
}

input[type=submit]
{
text-decoration: none;
padding: 1px 6px;
border: 10px solid red;
color: #000000; 
background-color: #DDDDDD;
}

HTML 代码如下：

<body>
<p>
<a href="loaddata/" >Go back for a new text</a>
</p>

<form action="loaddata/" method=get>
<input type="submit" value="Go back for a new text">
</form>
</body>

如果需要任何进一步的帮助，请发表评论。非常感谢您的反馈。

【讨论】：

谢谢。似乎排除appearance 块解决了这个问题。但是，这也不是一个通用的解决方案，因为在border: 2px outset #DDDDDD 的默认 Chrome 按钮设计的情况下，这两个按钮的呈现方式会有所不同。
是的，你是对的。但我已经为您提供了您当前面临的问题的解决方案。我会寻找合适的通用解决方案。但一般来说，我们开发人员会寻求我们立即获得的支持。哈哈