html - 为什么 PC 浏览器读取 HTML/CSS 页面的方式与 iPad 不同？

Question

我正在创建住宅客户调查。我使用 HTML/CSS 创建了一个网页，并在打开 iPad View 的情况下在 Chrome 上预览了该过程。

这是我的 Chrome 屏幕: https://i.imgur.com/gPM7gvp.png

这是我的 iPad 屏幕: https://i.imgur.com/2gB01uj.jpg

这是我的代码:

 <div class="slider-form"> 
          <h2 style="text-align: center; margin-top: 5%; ">Overall 
 Satisfaction Rating</h2>
          <br> 
          <p style="float:left; margin-left: 20px; padding-right: 70px; 
 padding-top: 29px; 
          font-weight: 500; font-size: 20px;"> Your unit/home? </p>

          <div id="rs1" style="overflow: hidden;" class="rating_scale">

            <label >
              <input type="radio" name="unit" value="1" /><span><img 
 class="smiley" src="img/1.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="2" /><span><img 
 class="smiley" src="img/2.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="3" /><span><img 
 class="smiley" src="img/3.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="4" /><span><img 
 class="smiley" src="img/4.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="5" /><span><img 
 class="smiley" src="img/5.png"></span>
            </label>
          </div>

          <p style="float:left; margin-left: 20px; padding-top: 29px; 
          font-weight: 500; font-size: 20px;"> Your property/building? 
 </p>

          <div id="rs1" style="overflow: hidden;" class="rating_scale">
            <label >
              <input type="radio" name="building" value="1" /><span><img 
 class="smiley" src="img/1.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="2" /><span><img 
 class="smiley" src="img/2.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="3" /><span><img 
 class="smiley" src="img/3.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="4" /><span><img 
 class="smiley" src="img/4.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="5" /><span><img 
 class="smiley" src="img/5.png"></span>
            </label>
          </div>

Answer 1

那是因为浏览器不使用相同的渲染引擎:https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Chrome 和 ios 很有可能在元素上没有相同的默认呈现。

您可以尝试重置它:https://cssreset.com/what-is-a-css-reset/