Question

我制作了一个网站，这是一个滚动的骰子模拟器。一切正常，除了在safari上的ios，它不能正确加载我的图片。它适用于Android手机，而不是我朋友的iPhone 6

这是我的所有HTML。全部。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 diceCount">
        <h3 class="text-center"> How Many Dice </h3>
        <div class="btn-group-justified" data-toggle="buttons">
          <label data-choice="6" class="btn btn-primary active">
            <input type="radio" name="options"  id="option1"      autocomplete="off"> 6
          </label>
          <label data-choice="7"class="btn btn-primary">
            <input type="radio" name="options" data-choice="2" id="option2" autocomplete="off">7
          </label>
          <label data-choice="8"class="btn btn-primary">
            <input type="radio" name="options" data-choice="3" id="option3" autocomplete="off"> 8
          </label>
        </div>
      </div> <!-- col md 12 -->
    </div><!--  row -->
    <div class="row">
      <div class="col-md-12">
        <button class ="btn btn-success btn-block" id="rollIt"> Roll</button>
      </div> <!-- col md 12 -->
    </div> <!-- row -->             
    <div class="target">
    </div>
  </div>

我的jquery / js：

    var rollOptions = ["hand", "heart", "lightning", "building", "skull", "heart"];
var diceCount = 6;
$(document).ready(function(){
  $(".btn-primary").on("click", function(){
  diceCount = $(this).attr('data-choice');
  return diceCount;
  });

  $("body").on("click", ".rollButton", function(){
  $( this ).toggleClass("stayRoll");
  });
  $("#rollIt").on("click", function(){
    var n = $( ".stayRoll" ).length;
    var manyRolls = diceCount - n;
      $( ".rollButton" ).not( ".stayRoll" ).remove();
        for (i = 0; i < manyRolls; i++) { 
         diceRolling();
  }
  function diceRolling(){
    var diceRoll = Math.floor(Math.random() * rollOptions.length)
    var rolled =  rollOptions[diceRoll];
    var rolledImg = rolled + ".png";
    var img = $ ("<img>").attr("src", rolledImg)
    var div =$("<button>").addClass("rollButton")
    .append(img);
    $(".target").append(div);
    }
  });
});

Answer 1

出于某种原因，对于IOS上的safari，我必须指定按钮的高度，而在我刚刚指定图片的高度之前，通常按钮会相应地调整。

在IOS

1 个答案: