Firefox 和 Chrome 的高度差

Question

对不起我的英语..

嗨，我有一个带有 jQ​​uery 代码的窗口，问题是 Chrome 上的窗口比 Firefox 大 1.5 厘米。

我的 Firefox 版本 68.6.0esr

我的 Chrome 版本 80.0.3987.149

我的 HTML 代码，

       <!-- call jQuery code -->
                   <div id="layerPreview-3" > </div>
                   <div id='layerPreviewContent-3'>
                       <!-- jQuery code -->
                      <div id="tittel-text">Erfogreich zum Warenkorb hinzugefügt <span id="closse-text"  onclick="layer_close_3(event);">Schließen</span></div>

                        <div class="text-pruduct">

        <div class="bild-text">
            <img class="image-window" alt="" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" />
            <div class="bild-text-anbieten">
                <p>Rucksack aus Hanf Gelbe</p>
                <p>Stückzahl: <b>1</b></p>
                <p>Bruttopreis: <b>40 &euro; </b></p>
            </div>
        </div>

        <div class="verticalLine"></div> 


        <div class="float_text">
            <p>Anzahl der Artikel im Waremkorb: 1 </p>
            <p>Wert des Warenkorbs: </p>
        </div>
        <div class="ajax-product-block">
            <a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a>
            <a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a>
        </div>
    </div>
</div>

CSS代码，

#layerPreview-3 {
  position: absolute;
  z-index: 1;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-color: rgba(50, 50, 50, 0.5);
}
#layerPreviewContent-3 {
   position: absolute;
   z-index: 1;
  display: none;
  background-color: #dedee0;
  margin-top: 0px;
  left: 50%;
  width: 46%;
  margin-left: -350px;
  height: 20rem;

  -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
   box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
 }
 .text-pruduct {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
 }
 .bild-text {
    display: flex;
    width: 60%;
 }
 .bild-text img {
   max-width: 200px;
   margin: 1px;
 }
 .bild-text-anbieten {
    padding: 5%;
    margin-left: 1%;
 }
 .verticalLine {
     border-left: 2px solid #cccccc;
     height: 60%;
     position: absolute;
     left: 60%;
     margin-left: -3px;
     top: 18%;
}
.float_text{
   width: 40%;
   margin-top: 3%;
}
.float_text p{
  margin-left: 13%;
}
.bild-text .image-window{
  padding: 1%;
  margin: 1%;
}
.ajax-product-block {

   width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;

}
.ajax-product-block a{
  padding: 0.3125rem 1rem;
  text-decoration: none;
}
.ajax-product-block a{
 -webkit-padding-start: 0.3125rem;
}
.ajax-product-block  { margin-top: 8%; }

.button_weiter_einkaufen {

  display: inline;
  text-transform: uppercase;
  padding: 0.35em;
  margin: 0;
  font-size: 0.8em;
  line-height: 1.35;
  color: #333;
  overflow: hidden;
  border: 1px solid #b1b1b1;
  background-color: #d8d8d8;
  text-decoration: none;
  float: left;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: black;

}
.button_weiter_einkaufen:hover {background-color: #666666;  color: white;}
.button_zum_warenkorbs { 
  display: inline-block;
  float: right; 
  font-weight: bold;
  text-transform: uppercase;
  background-color: #b3b3b3;
  border: 1px solid #b3b3b3;
  color: #fff;
  padding: 0.35em;
  font-size: 0.8em;
  line-height: 1.35;
  color: #333;
  border: 1px solid #b1b1b1;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  position: relative;
 }
 .button_zum_warenkorbs:hover { background-color: #8c8c8c; color: white; }

如何在 Firefox 上显示

如何在 Chrome 上显示

请有人解释一下我的错误在哪里？

Answer 1

#layerPreviewContent-3 {
    ... 
    height: 20rem;
    ...
   }

您上面的代码将弹出窗口的高度设置为“20”Root EM；但您的 CSS 没有设置根 EM。

你需要设置一个html { ... }字体大小值（变成Root EM），否则它使用浏览器默认值，每个浏览器可能不同。

因此，添加：

html {
    font-size: 16px;
}

到 CSS 的顶部，这将使派生的高度值 (20rem) 在所有浏览器中都相同。

---

Ihr obiger Code setzt die Höhe des Popup-Fensters auf "20" Root EM; aber Ihr CSS setzt das Root EM nicht。

Sie müssen ein html setzen Wert für die Schriftgröße setzen (der zum Root-EM wrd), andernfalls wrd der Standardwert des Browsers verwendet, der für jeden Browser unterschiedlich sein kann。

Fügen Sie daher hinzu：

html {
    font-size: 16px;
}

an den Anfang Ihres CSS, wodurch der abgeleitete Höhenwert (20rem) in allen Browsern gleich ist.