浏览器之间的左/右百分比差异

我希望在表格底部的中间位置有一个按钮，位于中间。我确实添加了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

浏览器之间的左/右百分比差异

回答

相关问题