Css iOS上的Safari可以';渲染按钮文本中心对齐?
我正在尝试用大文本(“300kr”)制作一个Css iOS上的Safari可以';渲染按钮文本中心对齐?,css,mobile-safari,Css,Mobile Safari,我正在尝试用大文本(“300kr”)制作一个: 但正如您所看到的,当我使用标记和大字体时,文本从按钮中心左对齐(图2)。它在我检查过的所有其他浏览器中呈现良好。这是Safari iOS的bug吗 按钮的CSS代码: background-color: rgb(0, 0, 0); border-color: rgb(0, 0, 0); border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-righ
:
但正如您所看到的,当我使用
标记和大字体时,文本从按钮中心左对齐(图2)。它在我检查过的所有其他浏览器中呈现良好。这是Safari iOS的bug吗
按钮的CSS代码:
background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-width: 5px;
box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px;
color: rgb(255, 255, 255);
font-family: KGEmpireofDirt;
font-size: 72px;
font-weight: 300;
opacity: 1;
transform: rotate(-20deg);
text-align: center;
width: 100%;
height: 100%;
border-style: solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
position: relative;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-weight: 700;
background-color: #6ec8dc;
color: #fff;
border-radius: 6px;
border: 0;
font-size: 100%;
-webkit-appearance: none
outline: 0;
resize: none;
HTML:
解决方案是为按钮设置显式的填充:0
。事实证明,Safari iOS的用户代理样式表与Safari for macOS的不同,Safari for macOS的padding
默认为1em
解决方案是为按钮设置显式padding:0
。事实证明,Safari iOS的用户代理样式表与Safari for macOS的不同,Safari for macOS的填充默认为1em
嗯,为什么在a
中有按钮。说来话长。你认为这就是问题所在吗?从提供的HTML和CSS来看,我想是的,因为我看不到任何相关的东西,因此问题的根源一定在按钮
之外,“夏季活动”徽章看起来也有点不协调,为什么在a
内有按钮?@LarsBeck是的。说来话长。你认为这就是问题所在吗?从提供的HTML和CSS来看,我想是的,因为我看不到任何相关的东西,因此问题的根源一定在按钮之外,因此“夏季活动”徽章看起来也有点错位
<a weld-element="" id="button-5762" class="weld-element weld-container weld-button ng-scope" ng-href="" style="height: 172.23703002929688px; left: 27.243403116862197%; top: 647.8621179414583px; width: 177.01909383137794px; z-index: 103;">
<button class="weld-child apply-styles ng-binding" id="button-5762-btn" ng-hide="isEditing" style="
background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-width: 5px;
box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px;
color: rgb(255, 255, 255);
font-family: KGEmpireofDirt;
font-size: 50px;
font-weight: 300;
/* letter-spacing: 0.03em; */
opacity: 1;
transform: rotate(-20deg);
text-align: center;">300kr</button>
</a>