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

Question

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

Answer 1

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>

Answer 2

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