Compatibilidade Firefox e Chrome

Front-end HTML
#1

boa noit,
vou postar duas imagens uma da tela do firefox e uma do chrome e o código.
a visualização fica totalmente diferente, no firefox fica perfeito ja no chrome fica uma bagunça

pq será?? n faço idéia do motivo, e reparei tb q o chrome as imagens que tenho em outras partes do site ficam desfocados enquanto no firefox fica perfeito
firefox:

firefox
firefox.png1366×768 274 KB

chrome:

chrome
chrome.jpg1366×768 307 KB

é um código simples, mas que faz o que preciso, por tras tem um codigo em javascrit de drag drop, esse código html fica dentro de uma tag object, não sou profissional, so faço algumas coisas pra ajudar meus alunos do ensino basico no seu desenvolvimento , entao toda ajuda é bem vinda… obg

aproveitando, oq é melhor usar pra chamar html dentro de outro html, OBJECT ou IFRAME?

código:

<!DOCTYPE html>

    <!-- CSS -->
    <link rel="stylesheet" href="/src/css/styles.css">

    <!-- JavaScript/jQuery -->
    <script src="/src/js/jQuery.js"></script>
    <script src="/src/js/dragDrop.js"></script>
    <script>
        var erros = 0;
    </script>
    
    <style>
        .tamanhoIMG{
            float: left;
            width: 100px;
            height: 120px;
            margin-right: 40px;
            margin-bottom: 10px;
        }
    </style>
    <title></title>
</head>

<body class="bg-atividades">

    <div class="row">

        <div class="col itens-centralizados">
            <div class="tamanhoIMG itens-centralizados"><img id="melancia" src="/src/img/figuras/melancia.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="abacate" src="/src/img/figuras/abacate.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="cereja" src="/src/img/figuras/cereja.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="laranja" src="/src/img/figuras/laranja.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="morango" src="/src/img/figuras/morango.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="pera" src="/src/img/figuras/pera.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <a href="associarSombra002.html" onclick="carregarErros(erros)"><img id="proximo" src="/src/img/padrao/proximo.png" alt="" style="display: none;"></a>
            <div class="tamanhoIMG itens-centralizados"><img id="kiwi" src="/src/img/figuras/kiwi.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="limao" src="/src/img/figuras/limao.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="maca" src="/src/img/figuras/maca.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
            <div class="tamanhoIMG itens-centralizados"><img id="uva" src="/src/img/figuras/uva.png" draggable="true" ondragstart="dragstart(event)" alt=""></div>
        </div>

        <div class="col itens-centralizados">
            <div class="tamanhoIMG itens-centralizados"><img class="morango" src="/src/img/figuras/morangoSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="limao" src="/src/img/figuras/limaoSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="maca" src="/src/img/figuras/macaSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="uva" src="/src/img/figuras/uvaSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="melancia" src="/src/img/figuras/melanciaSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="cereja" src="/src/img/figuras/cerejaSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="abacate" src="/src/img/figuras/abacateSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="laranja" src="/src/img/figuras/laranjaSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="kiwi" src="/src/img/figuras/kiwiSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
            <div class="tamanhoIMG itens-centralizados"><img class="pera" src="/src/img/figuras/peraSombra.png" alt="" ondrop="drop(event)" draggable="false"></div>
        </div>

    </div>

</body>
#2

Normal, são engines diferentes. Priorize desenvolver pro Chrome pois a esmagadora maioria dos browsers usam a engine Chromium.

Desenvolver olhando funcionar em browsers menos usados só vai ter retrabalho depois. Caso queira minimizar esses problemas, use algum framework css que já tenham implementado e testado em n browsers a técnica de grid system, como o Bootstrap. Fora isso vai ter que aprender bem css. Evite esses tamanhos fixos.

1 curtida
#3

Esse é um problema grave. tem coisas que rodam bem no Chrome e no Firefox não e vice versa.

#4

Cara experimenta utilizar ao o prefix -webkit- no css

#5 
    ficaria algo assim

        .tamanhoIMG{
        -webkit-float: left;
        -webkit-width: 100px;
        -webkit-height: 120px;
        -webkit-margin-right: 40px;
        -webkit-margin-bottom: 10px;
    }
#6

o bootstrap eu uso por causa das colunas, ajuda mto, e eles tem uma documentação mto boa

de acordo com o site https://www.w3schools.com/cssref/css3_browsersupport.asp, os prefixos só são usados em poucos comandos, mas irei dar uma estudada a mais nisso

fiz outros testes e descobri que o chrome não reconhecia os comandos porque a classe estava dentro da

, mudei pra dentro da tag e ele reconheceu