Difference height between Firefox and Chrome

Question

sorry for my English..

hi, I have a window it up with a jQuery code, that problem is the window to come on Chrome it is 1.5cm bigger as in Firefox.

My Firefox Version 68.6.0esr

My Chrome Version 80.0.3987.149

My Html Code,

       <!-- 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 code,

#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; }

How to show on Firefox

how to show on Chrome

can please someone explain me where is my mistake?

Answer 1

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

Your code above sets the height of the popup window to "20" Root EM; but your CSS does not set the Root EM.

You need to set a html { ... } font size value (which becomes the Root EM), otherwise it uses the browser default value, which may be different for each browser.

Therefore, add:

html {
    font-size: 16px;
}

To the top of your CSS and this will make the derived height value (20rem) the same across all browsers.

---

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 wird), andernfalls wird 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.