Same HTML & CSS looks different in Chrome and Firefox-CodePudding

I'm using a simple HTML layout and CSS style but for some reason the output looks very different in Chrome comparing to Firefox. I'm using the latest versions for both browsers.

Here is a fiddle: https://jsfiddle.net/mdaqh54n/

Are you seeing the difference? What could be the reason? Maybe because I've used a media query like this?

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

CodePudding user response：

delete the float left here

<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>

CodePudding user response：

.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>