hrefリンクボタンのボーダースタイルはクロムに表示されません

Chromeブラウザには、hrefリンクボタンのボーダースタイルは表示されません。ここでは、この問題のコードは次のとおりです。ここでhrefリンクボタンのボーダースタイルはクロムに表示されません

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

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

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

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

は、このコードがどのようにレンダリングされるかクロムブラウザ（v.47）である：

何の固体はありません見られるようにhrefリンクボタンの周りに赤い枠線が表示されます。入力ボタンにはこれらの弓形があります。同時に、Firefoxの（V.42）は、ボタンの両方のタイプの固体赤の境界線と同じコードをレンダリングする

：

クロームで国境を生成しない理由の質問ですhrefリンクボタンの場合？どのように修正することができますか？

出典

2016-04-10 Mikhail Geyer

'display：inline-block' –

@StephenThomas - これは役に立ちません。 –

これを試してください：代わりにボーダー利用のアウトラインの

を：

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

出典

2016-04-10 16:57:05 satya

この質問は、ボーダースタイルのケースについてです。 'アウトライン'の回避策は私にはあてはまらない。 –

appearanceプロパティは、ブラウザのネイティブの要素としての要素をレンダリングするように設計されています。 Google Chromeを使用しているときは、の枠線を2px outset buttonfaceに設定します。 appearanceプロパティを使用している場合、これを無効にすることはできません。

しかし、.link_button使用の周りに赤い枠を達成するために：

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

代わりborder: 10px solid red;

出典

2016-04-10 17:50:16

ありがとう、ありがとう。しかし、これは特殊なケース 'bold-style：solid;'のみでうまくいきますが、これは一般的な場合にはうまくいかないでしょう。例えば、 'bold-style：outset;'と書かれていれば –

のそれはあなたのために完全に正常に動作し、これを試してみてください、

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>

さらなるヘルプが必要な場合は、ご意見ください。フィードバックは非常に感謝します。

出典

2016-04-10 17:54:13 Mohit

ありがとう。この「出現」ブロックの除外が問題を解決しているようです。しかし、これも一般的な解決策ではありません。なぜなら、デフォルトのクロムボタンデザインの 'border：2px outset＃DDDDDD'では、2つのボタンが異なってレンダリングされるからです。 –

はい、あなたは正しいです。しかし、私は現在あなたが直面している問題の解決策をあなたに提供しました。私は適切な一般的な解決策を探すつもりです。しかし、一般的に我々の開発者は、私たちが即座に得るキックのために行く。ハハ – Mohit

hrefリンクボタンのボーダースタイルはクロムに表示されません

答えて

関連する問題