相同的 HTML 和 CSS 在 Chrome 和 Firefox 中看起来不同答案

【问题标题】：Same HTML & CSS looks different in Chrome and Firefox相同的 HTML 和 CSS 在 Chrome 和 Firefox 中看起来不同
【发布时间】：2022-01-02 20:41:03
【问题描述】：

我使用的是简单的 HTML 布局和 CSS 样式，但由于某种原因，Chrome 中的输出与 Firefox 相比看起来非常不同。我对这两种浏览器都使用了最新版本。

这是一个小提琴：https://jsfiddle.net/mdaqh54n/

你看到区别了吗？可能是什么原因？也许是因为我使用过这样的媒体查询？

@media all and (max-width: 800px) {
    .widget-container {
        max-width: 100%
    }
}

【问题讨论】：

在第 160 行，您缺少分号。
修复它但似乎没有任何区别
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
把
放在
之前 - jsfiddle.net/skhq0wto
我在 Firefox 上看到的高度更大。尝试为容器指定最大高度值。

标签： html css browser

【解决方案1】：

删除此处留下的浮动

<div style="width:69%; font-size:13px; line-height:140%">
          <div><a href="https://feedback.trusted.ro/pareri-magazin/janette.ro.html" target="blank"><img src="https://www.trusted.ro/blog/wp-content/uploads/2017/03/logo-jannete-ro-opiniie-de-incredere-trusted-ro-mic.png" title="asd" style="max-width:100px;margin:5px 0 40px 0"></a></div>
          <div style="margin-bottom:20px">Nota:<span style="font-size:1.5em; font-weight: bold"> 4.5</span> /10</div>
          <div>De la 231 clienți verificați</div>
          <div>50% recomandă acest magazin</div>
        </div>

【讨论】：

【解决方案2】：

“widget-shop”div 没有根据内部元素获得高度。

.widget-container {
        font-family: Helvetica, Arial, "open sans";
        border: 2px solid #349d64;
        width: 300px;
        border-radius: 10px;
        display: block;
        background-color: #ffffff;
        z-index: 10021;
        position: relative;
      }

      .widget-container .text-sm {
        font-size: 10px
      }

      #ft_w1 .widget-drawer.left {
        left: 0px;
      }

      #ft_w1 .widget-drawer.right {
        right: 0px
      }

      #ft_w1 .widget-container {}

      .widget-container .widget-header {
        background-color: #349d64;
        color: #fff;
        padding: 10px 5px;
        overflow: auto;
        text-align: center;
        font-size: 16px;
        line-height: 16px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px
      }

      .widget-container .review-area {
        background-color: #eef1f4;
        border-radius: 12px;
        font-size: 12px
      }

      .widget-container .review-area i.Chevron {
        position: absolute;
        display: block;
        height: 50px;
        left: 50px
      }

      .widget-container .review-area i.Chevron:before {
        position: absolute;
        display: block;
        content: "";
        border: 10px solid transparent;
        top: 0;
        border-top-color: #349D64
      }

      .widget-container .review-description {
        padding: 15px 10px 10px 10px
      }

      .widget-container .review-identity {
        padding: 5px 15px;
        background-color: #349d64;
        color: #fff;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px
      }

      .widget-container li {
        width: 250px !important;
        margin: 0 auto
      }

      .widget-container ul {
        list-style: none;
        padding-left: 0
      }

      .widget-container ul li {
        max-width: 85%;
        margin: 0px auto;
      }

      .widget-container .bx-wrapper {
        max-width: 310px !important
      }

      .widget-container .bx-viewport {
        height: 200px !important
      }

      .widget-container .slider-controlers a {
        cursor: pointer;
        position: absolute;
        top: 66%;
        margin-top: -16px;
        outline: 0;
        color: #349d64;
        z-index: 9999
      }

      .widget-container .op-previous {
        left: 8px
      }

      .widget-container .op-next {
        right: 8px
      }

      .slider-content .hide {
        display: none;
      }

      .widget-drawer {
        background-color: #349d64;
        position:fixed;
        bottom:20px;
        border-top-right-radius:3px;
        border-bottom-right-radius:3px;
        z-index:2147483947;
        left:0px;
        display: none;
      }

      .widget-drawer .rating-label {
        background-color:#349d64;
        color:#fff;
        padding: 5px 10px 0;
        border-radius:3px;
        font-size:10px;
        cursor:pointer;
      }

      .widget-drawer .rating-score {
        text-align:center;
        color:#fff;
        padding: 0 0 5px 0;
      }

      .widget-drawer .rating-score span {
        font-size: 1.2em;
        font-weight: bold;
        color:#fff;
      }

      #ft_min {
        display: none;
      }

      @media all and (max-width: 800px) {
        .widget-container {
          max-width: 100%
        }

        .widget-container .widget-slider {
          max-width: 90%;
          margin: auto padding:10px 0px;
          text-align: left
        }

        #ft_min {
          display: block;
        }
      }

<div id="ft_max" class="widget-drawer">
      <div class="rating-label">Nota clien&#539;ilor</div>
      <div class="rating-score"><span> 4.5</span> /10</div>
    </div>

    <div id="ft_container" class="widget-container" style="z-index:2147483948">
      <div class="widget-header">
        <div style="float:left">P&#259;reri verificate de la clien&#539;i</div><a id="ft_min" style="float:right; color:#fff; font-size:1.5em; cursor:pointer; font-weight:bold">&#95;</a>
      </div>
      <div class="widget-shop" style="padding:5px 10px; color:#444; overflow: hidden;">
        <div style="float:left; margin-right:10px; width:75px"> <a href="http://feedback.trusted.ro"
                                                                   target="_blank"><img alt="feedback-trusted" title="Feedback.Trusted"
                                                                                        src="https://trusted.ro/wp-content/uploads/2021/11/sigla_trusted_small.webp"
                                                                                        style="max-width:100%"> </a> </div>
        <div style="float:left; width:69%; font-size:13px; line-height:140%">
          <div><a href="https://feedback.trusted.ro/pareri-magazin/janette.ro.html" target="blank"><img
            src="https://www.trusted.ro/blog/wp-content/uploads/2017/03/logo-jannete-ro-opiniie-de-incredere-trusted-ro-mic.png"
            title="asd" style="max-width:100px;margin:5px 0 40px 0"></a></div>
          <div style="margin-bottom:20px">Nota:<span style="font-size:1.5em; font-weight: bold"> 4.5</span> /10</div>
          <div>De la 231 clien&#539;i verifica&#539;i</div>
          <div>50% recomand&#259; acest magazin</div>
        </div>
        <hr style="width:100%; border: .5px solid #EBEBEA; margin: 10px auto; clear: both; display: inline-block;" />
      </div>
      <!--#starts#-->
      <div class="widget-slider">
        <ul class="slider-content" id="ft_slider">
            <li id="ft-content-1">
              <div class="review-area">
                <div class="review-identity text-sm">John Doe - Washington</div> <i class="Chevron"></i>
                <div class="review-description">
                  <div class="review-comment" style="text-align:left">Lorem ipsum is a sample text</div>
                  <div class="review-meta text-sm" style="margin-top:5px"><strong>RATING: 4.5</strong> <span
                    style="float:right">29.01.1995</span></div>
                </div>
              </div>
            </li>
        </ul>
        <div class="slider-controlers" class=""> <a class="op-previous" id="ft-prev-btn"
                                                    onclick="_ftw.changeContent(-1)">&#9668;</a> <a class="op-next" id="ft-next-btn"
                                                                                                    onclick="_ftw.changeContent(1)">&#9658;</a> </div>
      </div>
      <!--#ends#-->
      <div style="text-align:center; margin:5px auto 15px auto"> <a
        href="https://feedback.trusted.ro/pareri-magazin/janette.ro.html" class="widget-opinions"
        style="font-size:12px; background-color: #349d64; color: #fff; padding: 5px 18px; border-radius: 5px; margin: 8px 0px;"
        target="_blank">Vezi toate opiniile</a> </div>
    </div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。