問題を作る<a>アンカータグと<button>要素はまったく同じ

-2

横並びに問題があります<a>と<button>が同じように見えます。ここで問題を作る<a>アンカータグと<button>要素はまったく同じ

はこの質問をしながら、私はそれを解決した問題

html, body { 
 
    font-family: 'canada-type-gibson'; 
 
    font-size: 10px; 
 
} 
 

 
.size1 { 
 
    /* we are using base font-size here */ 
 
} 
 
.link1 { 
 
    font-weight: 600; 
 
} 
 
.button1 { 
 
    font-weight: 600; 
 
    outline: none; 
 
    background:none; 
 
    border:none; 
 
} 
 

 
.size2 { 
 
    font-size: 20px; 
 
} 
 
.link2 { 
 
    font-weight: 600; 
 
} 
 
.button2 { 
 
    font-weight: 600; 
 
    outline: none; 
 
    background:none; 
 
    border:none; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div class="size1"> 
 
     <a class="link1">LINK</a> 
 
     <button class="button1">BUTTON</button> 
 
    </div> 
 
    
 
    <div class="size2"> 
 
     <a class="link2">LINK</a> 
 
     <button class="button2">BUTTON</button> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-11-12 agm1984

なぜこれがダウン表示されていますか？私はこの質問を削除しても問題ありませんが、そのキーワードは将来の検索に役立つと思います。このトピックは、これらのキーワードによる検索では発生しません。 font-familyがフォーム要素に継承されていないことがわかっているのは明らかです。 – agm1984

-1

を示した最小の例です。質問を削除するのではなく、答えを共有して、他の人が後で見つけることができるようにしたいと思います。

font-familyは継承されていないため、明示的に定義する必要があります。

参照：

button { 
    font-family: 'canada-type-gibson'; 
    cursor: pointer; 
} 

a { 
    cursor: pointer; 
}

<button>フォントサイズ：私の最終的な解決策は、単にルートレベルですべてのbutton要素にfont-familyスタイルを入れていた

Why is 'font-family' not inherited in '<button>' tags automatically?

html, body { 
 
    font-family: 'canada-type-gibson'; 
 
    font-size: 10px; 
 
} 
 

 
.link1 { 
 
    font-weight: 600; 
 
} 
 
.button1 { 
 
    font-family: 'canada-type-gibson'; 
 
    font-size: 10px; 
 
    font-weight: 600; 
 
    outline: none; 
 
    background:none; 
 
    border:none; 
 
} 
 

 
.link2 { 
 
    font-size: 20px; 
 
    font-weight: 600; 
 
} 
 
.button2 { 
 
    font-family: 'canada-type-gibson'; 
 
    font-size: 20px; 
 
    font-weight: 600; 
 
    outline: none; 
 
    background:none; 
 
    border:none; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <a class="link1">LINK</a> 
 
     <button class="button1">BUTTON</button> 
 
    </div> 
 
    
 
    <div> 
 
     <a class="link2">LINK</a> 
 
     <button class="button2">BUTTON</button> 
 
    </div> 
 
    </body> 
 
</html>

明示的にそのまま宣言する必要があります親要素から継承されません。

削除デフォルトボタンのスタイル

は、私は質問または回答に話ませんでしたが、ボタンを除去するために、これらのスタイルは<button>に望まれている<a>タグのように見えるようにしますデフォルトのグレーの外観：

outline: none; 
background:none; 
border:none;

出典

2017-11-12 22:34:24 agm1984

デフォルトでは、同じフォントです。 – Jonny

いいえ、そうではありません。例を実行します。 – agm1984

私はそうしました彼らはまったく同じですただ一つ大きいです – Jonny

あなたのフォントサイズをお互いに一致させるように変更してください。

.size1 { font-size: 20px;} 

.size2 { font-size: 20px;}

出典

2017-11-12 22:37:35 Jonny

私のフォントサイズ「10」の使用法および「20」は、2つの要素間の非比例の差異とフォントの重量の差異を示すことは非常に意図的でした。 – agm1984

問題を作る<a>アンカータグと<button>要素はまったく同じ

答えて

関連する問題