瀏覽器之間的左/右百分比差異

我希望在表格底部的中間位置有一個按鈕，位於中間。我確實添加了left:30%和right:30%，所以按鈕位於中間位置，不過，我注意到Chrome在Chrome中的渲染效果與Safari或Firefox不同，Chrome中的百分比並不相同，因此按鈕會稍微向左比正確，而不是集中/中間。試試下面。我怎樣才能讓這個在Chrome中也一樣？爲什麼百分比呈現不同，以此爲中心的最佳技術是什麼？absolute需要定位在什麼位置？瀏覽器之間的左/右百分比差異

.panel { 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
    padding: 15px 25px; 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 

 
.table { 
 
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02); 
 
    display: flex; 
 
    flex-direction: column; 
 
    height:350px; 
 
    background:lightblue; 
 
} 
 

 
.table * { 
 
    text-align: center; 
 
} 
 

 
.contact-button { 
 
    bottom: -25px; 
 
    background: #f9f9f9; 
 
    border-radius: 10px; 
 
    left: 30%; 
 
    right: 30%; 
 
    margin: 0 auto; 
 
    position:absolute; 
 
} 
 

 
.btn { 
 
    display: inline-block; 
 
    padding: 8px 32px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    outline: none; 
 
    line-height: inherit; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    color: black; 
 
    font-size: 14px; 
 
    letter-spacing: 2px; 
 

 
}

<div class="panel table"> 
 
    <a href="/contact"><button class="btn contact-button">CONTACT MORE INFO</button></a> 
 
</div>

來源

2017-09-01 John R

你說得對，但告訴我，爲什麼你在有

噢，謝謝，這不能回答這個問題。這會影響渲染嗎？ –

您可以直接從div移動button，創造這樣的事情

<div class="panel table"></div> 
<div class="wrapper"> 
    <button class="btn contact-button">CONTACT MORE INFO</button> 
</div>

這樣，您就不必使用position:absolute;你可以只使用

display:flex; 
justify-content:center;

如果你想對舊版瀏覽器的支持，請檢查該 article

檢查以下

.panel { 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 

 
.table { 
 
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02); 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 350px; 
 
    background: lightblue; 
 
} 
 

 
.table * { 
 
    text-align: center; 
 
} 
 

 
.contact-button { 
 
    bottom: -25px; 
 
    background: #f9f9f9; 
 
    border-radius: 10px; 
 
    left: 30%; 
 
    right: 30%; 
 
    margin: 0 auto; 
 
} 
 

 
.btn { 
 
    display: inline-block; 
 
    padding: 8px 32px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    outline: none; 
 
    line-height: inherit; 
 
    border: 1px solid black; 
 
    color: black; 
 
    font-size: 14px; 
 
    letter-spacing: 2px; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="panel table"> 
 
</div> 
 
<div class="wrapper"> 
 
    <button class="btn contact-button">CONTACT MORE INFO</button> 
 
</div>

來源

2017-09-01 06:43:05

刪除位置：絕對不起作用，所以我仍然擁有'position：absolute'，並按照您的建議添加包裝。謝謝 –

的例子

您也可以使用這個它可以幫助你在不改變太多的東西：

.contact-button { 
background: #f9f9f9; 
border-radius: 10px; 
margin: 0 auto; 
margin-top:370px; 

}

看看這個bin：https://jsbin.com/gipibecedu/edit?html,css,output

來源

2017-09-01 06:54:18

瀏覽器之間的左/右百分比差異

回答

相關問題