html - 与桌面相比，iPhone 上的填充显示向左 19 像素

问题描述

我正在尝试在 Shogun 登录页面上使用嵌入此代码，但我在填充文本行时遇到问题。

单选按钮 3 上的第 2 行“Silver 3x (Save 55%)”垂直左对齐，红色“最受欢迎”，左填充：46px；在桌面上。

当我在 iPhone 上查看页面时，文本向左移动 19 像素。

如果我更改为 padding-left: 65px; 第 2 行在 iPhone 上显示为对齐，但在桌面上向右移动了 19 像素。

我询问了 Shogun 应用支持，他们建议这可能与用户代理样式表有关，但我仍然无法解决我们的问题。

我尝试了 CSS 重置，但它不起作用。也许我用错了。

有什么建议么？

     /* Radio Buttons */
     #ctable {
       text-align: left;
       border: 1px solid #c6c6c6;
       padding: 15px;
       font-size: 20px;
     }

     th {
       border-color: transparent;
       border-bottom: 1px solid #c6c6c6;
       padding-bottom: 12px;
     }

     td {
       padding: 10px;
       border-color: transparent;
     }

     .button2 {
      border-bottom: 1px solid black;
    }

     .hf {
       cursor: pointer;
     }

     .hf td input[type="radio"] {
       transform: scale(1.3);
       margin-right: 16px;
       margin-left: 10px;
     }

     .highlited {
       box-shadow: 3px 4px 8px 1px #b2afaf;
     }

     .highlited td {
       background-color: #FDF107;
       border: 1px solid black;
     }

     .mp {
       color: red;
       font-size: 25px;
       font-weight: 700;
       display: inline-block;
       margin-bottom: 7px;
     }

     .mpt {
       display: inline-block;
       padding-left: 46px;
     }

<div>
<table id="ctable" style="width:100%" cellspacing="0" cellpadding="0">
 <tr>
   <th>Qty</th><th>Price</th>
 </tr>

 <tr class="hf">
   <td><label><input type="radio" name="radio" value="radio1"> Silver 1x (50% OFF)</label> </td>
         <td>$9.98</td>
 </tr>

 <tr class="hf">
   <td class="button2"><label><input type="radio" name="radio" value="radio2"> Silver 2x (50% OFF)</label></td>
         <td class="button2">$9.98</td>
 </tr>

   <tr class="hf highlited">
      <td style="border-right: 0px;">
        <label>
          <input type="radio" name="radio" value="radio3" checked> <span class="mp">Most Popular</span><br /><span class="mpt"> Silver 3x (Save 55%)</span></label>
      </td>
      <td style="border-left: 0px;">$26.97</td>
    </tr>

 <tr class="hf">
   <td><label><input type="radio" name="radio" value="radio4"> Silver 5x (65% OFF)</label></td>
            <td>$9.98</td>

 </tr>

 <tr class="hf">
   <td><label><input type="radio" name="radio" value="radio5"> Silver 7x (75% OFF)</label></td>
            <td>$9.98</td>
 </tr>
</table>
</div>

标签： htmlcss

html - 与桌面相比，iPhone 上的填充显示向左 19 像素

问题描述

解决方案

推荐阅读