html - href 链接按钮的边框样式未在 chrome 中显示

Question

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 链接按钮的情况下不产生边框？如何修复？

Answer 1

appearance 属性旨在将元素呈现为浏览器 native 元素。使用 Google Chrome 时，他们将 button 边框设置为 2px outset buttonface。这在使用 appearance 属性时不能被覆盖。

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

box-shadow: 0px 0px 0px 10px 红色;

代替 border: 10px solid red;