Question

我正在创建住宅客户调查。我使用HTML / CSS创建了一个网页，并在打开iPad视图的情况下在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/

Answer 2

我使用 flex 方法解决了此问题。我将所有左段和右段广播输入都放入一个div容器中。并为其分配了一个类和ID。其余的只是 CSS flex 方法。

.container{
 display: flex;
 }
 .left {
 flex: 2;
 text-align: left;
 }
 .right{
 flex: 1;
 }

谢谢你们的快速解答。

Answer 3

虽然以上答案是正确的，但我认为解决您问题的根本原因并不准确。

您需要添加不同分辨率的媒体查询。为了避免将来需要这样做，您应该使用Bootstrap框架。

请参见以下链接以了解有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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

3 个答案: