我不知道什么可以解決這個問題。
https://jsfiddle.net/eL5gn73s/
那個大的是div，小的是縮小了的按鈕。
按鈕應該與 div 大小相同，而不是相反。
從 div 更改為按鈕后，按鈕縮小到小于 47px 的 div 大小。
.box {
position: relative;
background: red;
width: 47px;
height: 47px;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.box.box2 {
background: red;
}<button class="box box2" type="button"></button>
<button class="box " type="button"></button>
<div class="box"></div>uj5u.com熱心網友回復：
給他們一個display:block（或inline-block）并添加box-sizing:content-box到兩者，然后添加box-sizing到兩個（border-box）
至于完整的答案：這與 theborder-box和content box不同于divtobutton
Button用小的，div用大的。
content-box uses the size padding borders
border-box uses size padding - borders
所以你的 4px X 2 border-radius 必須添加到按鈕以使其與 div 的大小相同。
在這里我展示了固定的和原始的進行比較（所有作為行內塊只是為了視覺）注意第一組與第二組 DIV 的大小相同。
希望這能給出更好的解釋以及如何“修復”它。
body {
font-size: 16px;
background-color: #ddffdd;
margin: 0;
padding: 0;
}
button.exit,
div.exit,
div.exit-new,
button.exit-new {
display: inline-block;
position:relative;
}
div.exit-new,
button.exit-new {
width: 47px;
height: 47px;
}
div.exit {
box-sizing: content-box;
width: 47px;
height: 47px;
top: 4px;
}
button.exit {
box-sizing: border-box;
width: 55px;
height: 55px;
}
/*add element just for specificity here */
button.exit,
div.exit,
div.exit-new,
button.exit-new {
background: red;
border-radius: 4px;
border-width: 4px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.3);
border-right-color: rgba(0, 0, 0, 0.3);
border-bottom-color: rgba(0, 0, 0, 0.8);
}
.exit.exitPage2 {
background: red;
}<div class="container">
<button class="exit exitPage2" type="button"></button>
<button class="exit " type="button"></button>
<div class="exit"></div>
</div>
<div class="container">
<div>originals</div>
<button class="exit-new" type="button"></button>
<button class="exit-new" type="button"></button>
<div class="exit-new"></div>
</div>uj5u.com熱心網友回復：
嘗試像這樣編輯 .exitpage2 css 中的按鈕
.exit.exitPage2 {
background: red;
width: 50px;
height: 50px;
}
如果您將高度和寬度設定為所需的數量，它應該可以滿足您的需要
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535523.html
標籤：网页格式CSS按钮