jak stworzyć tekst w tej samej szerokości w IE i Firefox?

Question

Chcę mieć pole tekstowe o wielkości 500 pikseli, to jest arkusz CSS, którego używam dla obszaru tekstowego:

szerokość: 498 pikseli; wypełnienie: 0px; margin: 0px;

Zauważyłem, że IE i Chrome mają domyślnie granicę 1px, z drugiej strony FF ma granicę 2px, która powoduje, że tekst ma 502px zamiast 500px, jakieś obejścia?

Po prostu uwagę, mogę wyraźnie określić szerokość krawędzi texarea, czyli. border-width: 1px, ale problemem jest to, że nie działa dobrze z IE (domyślna granica tekstu w IE nie wygląda wizualnie, gdy granica jest ustawiona na 1px), mógłbym zmienić kolor obramowania, ale nie chcę tego robić, wolę zachować domyślne style przeglądarki, chcę tylko, aby szerokość była taka sama we wszystkich przeglądarkach bez zmiany domyślnych stylów lub ustawienia koloru na granicy, czy to możliwe?

Answer 1

Można ustawić domyślne style wszystkich przeglądarek, używając arkusza Reset CSS na górze dokumentu. Lubię samemu YUI reset CSS. To powinno ustawić style bazowe dla wszystkich kontrolek, aby były takie same we wszystkich przeglądarkach na początek, i które powinny pozwolić na bardziej przewidywalny układ.

IMO, jeśli pozwolisz każdej przeglądarce mieć swój własny styl (który może być nawet dostosowany przez użytkownika!), Jesteś na drodze do nieprzewidywalnego stylu dla twojej aplikacji, z problemami pojawiającymi się w miejscach, o których nigdy nie myślałeś oni by. Lepiej użyć resetowania CSS, a następnie odpowiednio nadać stylu aplikacjom. Jeśli wejdziesz na stronę yahoo (z referencjami), będą też miały swój "bazowy" CSS, od którego możesz zacząć, co jest całkiem fajne.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

Answer 2

Mamy tendencję do tworzenia oddzielnych arkuszy stylów dla IE i FF, aby ominąć ich „dziwactwa”. Można wtedy użyć prostego fragmentu kodu, aby zapewnić użycie właściwego arkusza stylów.

<!--[if lte IE 6]> works for < than IE 6 
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" /> 
<![endif]--> 

Istnieje również prace dla IE 6

etc ...

Answer 3

używamy jQuery ozdobić nasze elementy HTML i niech on zajmować się kwestiami poprzecznych przeglądarki.

Answer 4

Zasadniczo wyrażasz ubolewanie, że ustawienia domyślne przeglądarki nie są takie same dla każdej przeglądarki, ale nie chcesz bezpośrednio zmieniać tych właściwości.

To nie ma sensu.

Podobnie jak inne polecam używanie resetowania arkusza stylów (jestem wielkim fanem Eric Meyera), a następnie stylizowanie granic dokładnie tak, jak chcesz. Łatwo. Jasny. Bez wad.