Question

Chrome浏览器中不显示边框样式的href链接按钮。以下是此问题的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

与此同时，Firefox（第42节）为两种类型的按钮呈现相同的代码，并带有纯红色边框：

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

Answer 1

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

但是，要在.link_button附近获得红色边框，请使用：

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

而不是border: 10px solid red;

Answer 2

请尝试一下，它对您来说非常合适，

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>

需要进一步的帮助请评论。反馈非常感谢。

Answer 3

请试试这个：

而不是边框使用大纲：

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

chrome

3 个答案: