Çözüldü Mozilla ve Chromium tarayıcılardaki farklı padding değer sorunu

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

S0LEUS

Centipat
Katılım
26 Mart 2023
Mesajlar
37
Daha fazla  
Cinsiyet
Erkek
Merhaba arkadaşlar. Sorunum şu: 5 adet inputum var ve her birine padding-top 12px değerini veriyorum bu değer Chromium tarayıcılarda istediğim gibi gözüküyor ancak aynı projeyi Mozilla'da çalıştırırsam 12px olan değer sanki 6px gibi görünüyor. Bunun çözümü nedir? Yardımcı olursanız sevinirim.
 
Son düzenleyen: Moderatör:
Çözüm
border box



Yardımcı olabilir misin?
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("cssLink").setAttribute("href", "firefox.css");
} else if (navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Chromium") != -1) {
document.getElementById("cssLink").setAttribute("href", "style.css");
} else {
// firefox disindaki tarayicilar icin varsayilan css
document.getElementById("cssLink").setAttribute("href", "style.css");
}

Head kısmınada <link id="cssLink" rel="stylesheet" href="style.css">

Atarsan halledersin.
Merhaba arkadaşlar. Sorunum şu: 5 adet inputum var ve her birine padding-top 12px değerini veriyorum bu değer Chromium tarayıcılarda istediğim gibi gözüküyor ancak aynı projeyi Mozilla'da çalıştırırsam 12px olan değer sanki 6px gibi görünüyor. Bunun çözümü nedir? Yardımcı olursanız sevinirim.
Farklı css rendering motoru kullandıklarından dolayı. Javascript ile tarayıcı algılama eklersen firefox'a özel css ekleyebilirsin.
 
Padding eklediğin her elemente şu şekilde box sizing belirtirsen sorun çözülür.

CSS:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
 
border box



Yardımcı olabilir misin?
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("cssLink").setAttribute("href", "firefox.css");
} else if (navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Chromium") != -1) {
document.getElementById("cssLink").setAttribute("href", "style.css");
} else {
// firefox disindaki tarayicilar icin varsayilan css
document.getElementById("cssLink").setAttribute("href", "style.css");
}

Head kısmınada <link id="cssLink" rel="stylesheet" href="style.css">

Atarsan halledersin.
 
Çözüm
İf (navigator. Useragent. İndexof("Firefox")!= -1) {
Document. Getelementbyıd("csslink").setattribute("href", "Firefox. CSS");
} Else if (navigator. Useragent. İndexof("Chrome")!= -1 || navigator. Useragent. İndexof("Chromium")!= -1) {
Document. Getelementbyıd("csslink").setattribute("href", "style. CSS");
} Else {
// Firefox disindaki tarayicilar icin varsayilan CSS.
Document. Getelementbyıd("csslink").setattribute("href", "style. CSS");
}

Head kısmınada <link ID="csslink" rel="stylesheet" href="style. CSS">

Atarsan halledersin.

Daha yeni gördüm pardon :) ChatGPT'den bu koda benzer aldım teşekkürler.

Padding eklediğin her elemente şu şekilde box sizing belirtirsen sorun çözülür.

CSS:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Maalesef bu işe yaramadı.
 
Son düzenleyen: Moderatör:

Yeni konular

Geri
Yukarı