2016-05-07 4 views
0

昨日は練習していましたが、数時間後にChromeでこれを確認しました(firefoxで作業していました)。私はそれをどのように修正すべきですか?
私はどこからばかげた高さを取るのか分かりません。 Sctructureもう一度Chromeのバグの高さのプロパティ

html, body { 
     margin: 0; 
     padding: 0; 
    } 
    body { 
     background-color: #f0ca4d; 
     display: flex; 
     justify-content: center; 
     font-family: "Roboto"; 
     color: white; 
    } 
    .popup { 
     margin-top: 100px; 
     width: 400px; 
/*  height: 300px;*/ 
     background-color: #fff; 
     -webkit-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2); 
     -moz-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2); 
     box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2); 
     position: relative; 

    } 
    .top { 
     width: 100%; 
     height: 70px; 
     background-color: #324d5c; 
     display: flex; 
     justify-content: flex-start;; 
     flex-direction: row; 
    } 

    .top span { 
     margin: 32px 16px 16px 16px; 
     font-size: 24px; 
     font-weight: 300; 
    } 
    .content { 
     color: rgba(0,0,0,0.5); 
     margin: 32px 32px 0px 32px; 
     line-height: 150%; 
    } 
    .fab { 
     width: 48px; 
     height: 48px; 
     background-color: #de5b49; 
     border-radius: 50%; 
     margin-left: auto; 
     margin-right: 16px; 
     position: absolute; 
     right: 0px; 
     top: 46px; 
     text-align: center; 
    } 
    .fab:hover span { 
     cursor: pointer; 
    } 
    .fab span { 
     font-size: 30px; 
     -ms-transform: rotate(45deg); 
     -webkit-transform: rotate(45deg); 
     transform: rotate(45deg); 
     font-weight: 300; 
     line-height: 48px; 
     display: inline-block; 
    } 
    .bot span { 
     text-transform: uppercase; 
     color: #324d5c; 
     font-weight: 500; 
     padding: 16px 32px 16px 32px; 

     transition: background-color 0.45s cubic-bezier(0,1,.83,.67) 0.08s; 
     background-color: white; 
    } 
    .bot span:hover { 
     background-color: #f8f8f8; 
     cursor: pointer; 
    } 
    .bot { 
     width: 100%; 
     display: flex; 
     justify-content: flex-end; 
    } 
    #disabled { 
     color: #d1d1d1; 
     margin-right: auto; 
    } 
    #disabled:hover { 
     background-color: white !important; 
     cursor: default; 
     -webkit-user-select: none; /* Chrome all/Safari all */ 
     -moz-user-select: none;  /* Firefox all */ 
     -ms-user-select: none;  /* IE 10+ */ 
     user-select: none;   /* Likely future */ 
    } 

<div class="popup"> 
    <div class="top"> 
     <span>Warning box</span> 
    </div> 
    <div class="fab"> 
     <span>+</span> 
    </div> 
    <div class="content"> 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
<!--  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> --> 
    </div> 
    <div class="bot"> 
     <span id="disabled">disabled</span> 
     <span>ENABLED</span> 
    </div> 
    </div> 

はこの作業を取得することはできません

ここで私は(左は、Firefoxで、右のクロムがある) enter image description here

スタイリングを得るプレビューです。

+1

ですそれは正方形の箱です。 –

+0

それは奇妙です、それはまた私のためにクロムにブラケットを通過している – Dawid

+0

うん、私は友人にそれを送った、彼は私と同じ問題があります。 – Dawid

答えて

1

これは、私はクロームで、ブラケットのライブプレビューでこれを実行し、それはあなたの質問の左側の画像と私に同じ出力を与えている..私はクロームで持っているもの

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <title> Stack Overflow issues</title> 
    <style> 



     html, 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     body { 
      background-color: #f0ca4d; 
      display: flex; 
      justify-content: center; 
      font-family: "Roboto"; 
      color: white; 
     } 

     .popup { 
      margin-top: 100px; 
      width: 400px; 
      /*  height: 300px;*/ 
      background-color: #fff; 
      -webkit-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2); 
      -moz-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2); 
      box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2); 
      position: relative; 
     } 

     .top { 
      width: 100%; 
      height: 70px; 
      background-color: #324d5c; 
      display: flex; 
      justify-content: flex-start; 
      ; 
      flex-direction: row; 
     } 

     .top span { 
      margin: 32px 16px 16px 16px; 
      font-size: 24px; 
      font-weight: 300; 
     } 

     .content { 
      color: rgba(0, 0, 0, 0.5); 
      margin: 32px 32px 0px 32px; 
      line-height: 150%; 
     } 

     .fab { 
      width: 48px; 
      height: 48px; 
      background-color: #de5b49; 
      border-radius: 50%; 
      margin-left: auto; 
      margin-right: 16px; 
      position: absolute; 
      right: 0px; 
      top: 46px; 
      text-align: center; 
     } 

     .fab:hover span { 
      cursor: pointer; 
     } 

     .fab span { 
      font-size: 30px; 
      -ms-transform: rotate(45deg); 
      -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
      font-weight: 300; 
      line-height: 48px; 
      display: inline-block; 
     } 

     .bot span { 
      text-transform: uppercase; 
      color: #324d5c; 
      font-weight: 500; 
      padding: 16px 32px 16px 32px; 
      transition: background-color 0.45s cubic-bezier(0, 1, .83, .67) 0.08s; 
      background-color: white; 
     } 

     .bot span:hover { 
      background-color: #f8f8f8; 
      cursor: pointer; 
     } 

     .bot { 
      width: 100%; 
      display: flex; 
      justify-content: flex-end; 
     } 

     #disabled { 
      color: #d1d1d1; 
      margin-right: auto; 
     } 

     #disabled:hover { 
      background-color: white !important; 
      cursor: default; 
      -webkit-user-select: none; 
      /* Chrome all/Safari all */ 
      -moz-user-select: none; 
      /* Firefox all */ 
      -ms-user-select: none; 
      /* IE 10+ */ 
      user-select: none; 
      /* Likely future */ 
     } 

    </style> 
</head> 

<body> 

    <div class="popup"> 
     <div class="top"> 
      <span>Warning box</span> 
     </div> 
     <div class="fab"> 
      <span>+</span> 
     </div> 
     <div class="content"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <!--  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> --> 
     </div> 
     <div class="bot"> 
      <span id="disabled">disabled</span> 
      <span>ENABLED</span> 
     </div> 
    </div> 

</body> 

</html> 

enter image description here

+0

ありがとう、 今すぐに整理されました。 '<!DOCTYPE html>'はChromeにとっては重要ですが、Firefoxでは何も変更されませんでした。 ちょうど小さな要素だったので、私はそれを – Dawid

+0

に入れて忘れました。私も知らなかった何かを学びました。これに言及して本当にありがとうございます。将来もこの心を保つでしょう。 –

関連する問題