CSS specifico per IE e chrome, adesso funziona bene solo su Mozzilla Firefox

[deleted_193]

Salve, non riesco a trovare su google una spiegazione per risolvere il mio problema, così mi rivolgo a voi.
Ho creato due div che vengono messi l'uno di fianco all'altro, adesso su mozzilla visualizzo tutto perfettamente, mentre su chrome la seconda colonna è un più in basso rispetto alla prima, tuttavia le colonne hanno gli stessi attributi di posizionamento, visto che le ho state create per con lo scopo di affiancarle.
Adesso vorrei sapere come posso fare a cambiare i seguenti attributi solo per chrome e per IE:
#prova {font:...; margin:...; padding:..;}
Premetto che ho già visto la condizione nel codice html "if IE v6.0...""...end if" per aprire un'altro file css che abbia il codice riscritto per ie, ma a me interessa farlo semplicemente sulle ultime versioni per il momento, quindi ie10 ad esempio, ecc.
Posso farlo semplicemente dallo stesso file css mettendo tipo un "if IE" per esempio.
Se possibile accetto link a spiegazioni o esempi.

[Nobody33]

stai esponendo 2 problemi allo stesso tempo.

1)commenti addizionali

2) il problema della 2° colonna che si trova più in basso.

IE10 non accetta più i commenti addizionali (sic ), quindi ci dovrai andare con javascript.

Non ho IE10 per potertelo testare, ma se mi passi un link posso vedere con chrome.

[deleted_193]

Meglio fare un problema alla volta, concentriamoci prima su chrome e la seconda colonna.
Non ho messo questo link online, ma solo in locale, però ti ho ricreato una copia di quello che ho fatto: in pratica ho preferito creare un contenitore con due sotto contenitori.
Ecco il link: link .
Per vedere il risultato così come dovrebbe essere usa mozzilla firefox, mentre per vedere lo "sballo" degli elementi usa chrome, se vuoi puoi dare un'occhiata anche con ie9, non ho verificato, ma in ie10 sballa gli ultimi 2 elementi mettendoli più in alto, mentre chrome li sballa tutti.
Ho pensato di risolvere il problema mettendo un "top:-5px" ad esempio solo se si naviga con chrome, ecc, ma non credo sia la soluzione ottimale.
Secondo me è un problema di interpretazione dei browser, visto che ereditano la posizione top:0 del primo contenitore ho pensato che potrebbe essere che chrome faccia le caselle di testo più grandi di mozzilla e che lasci anche un piccolo padding in automatico tra questi elementi.
Fammi sapere se sei dello stesso avviso.

[Nobody33]

Per ogni NOME + CAMPO fai un contenitore, il tutto racchiuso a sua volta in un contenitore.

[deleted_193]

Come mi hai scritto non si capisce bene.
In pratica come hai visto i nomi e i campi sono divisi in due contenitori diversi, tu vuoi che li unisca, separandoli in maniera orizzontale, ma unendo sulla stessa riga NOME e CAMPO?
Così facendo credo che si crei una spoporzione tra i campi più lunghi e quelli più corti, e avrei il problema di adesso, solo che in orizzontale, piuttosto che in verticale.
Sarebbe una cosa tipo questa:

<div id="colonna">
<div id="primo"><div id="uno"></div><div id="uno_campo"></div></div>
<div id="secondo"><div id="due"></div><div id="due_campo"></div></div>
....
</div>

Io ho capito così, ma mi sembra troppo laborioso per un semplice incolonnamento, preferirei evitarlo. Dimmi se ho capito male.
Comunque almeno tu hai capito per quale motivo chrome mette la prima colonna più in basso della seconda, nonostante il fatto che abbaiano gli stessi attributi?

[deleted_193]

Ho appena sistemato l'errore su IE, rimane solo chrome a comportarsi in quel modo.

[Nobody33]

<div id="main">
    <div class="testClass">
        <label class="labelClass">test</label>
       <input class="inputClass" type="text" name="1" value="" />
    </div>

ecc...
</div>

Che ci vuole a farsi 3 classi (per il div,label + input) per farla pulita ?
Hai più mobilità e sei sicuro che va su tutti i browser.

[deleted_193]

OK, adesso provo e ti faccio sapere.
Domanda: sai come faccio a specificare per mozzilla ad esempio(quindi tag mozz in css) un diverso stile font?
Ad esempio "-moz-font:50px...;"

[deleted_193]

Ho trovato un'altra soluzione più "elegante", che agisce propio sugli input:

input[type="text"] {padding:0; margin:0;}

Con questa sono a posto (l'avevo già visto ceh mi lasciava un padding non voluto, ma non sapevo come levarlo!).


P.S. ho provato la tua soluzione ma non riuscivo a metterli perfettament el'uno sotto l'altro, si creavano troppe sbavature a cui dovevo rimediar emettendo lo spazio, oppure facendo una classe specifica solo per un elemento.

[Nobody33]

-moz-font non esiste.

Ma perché vuoi usare un font solo per Firefox?