Zwei-Element „table“ ausgerichtet schön
https://stackoverflow.com/questions/1446559
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Dies ist eine etwas offene Frage, aber ich möchte wirklich, diese zu verstehen, damit ich nicht.
Ich habe ein Zwei-Element "table" (CSS mit Spannweiten). Die linke Spalte hat immer ein Symbol, das 20x20 Pixel. Die zweite Spalte hat eine einzelne Textzeile mit dem Symbol verknüpft.
Ich habe alle möglichen Ideen weg konnte ich kommen mit diesen Blick machen genau das gleiche in IE6-8, Firefox 3.5 und Google Chrome, aber alle Ideen führen in den Text ein Wesen oder zwei Pixel aus am besten .
Ich bin für eine todsichere nicht-<table> Weise dieser Liste zu machen genau gleich aussieht in allen Browsern. Ich meine jedes einzelne Pixel.
Lösung
Pixel perfekt existiert nicht - man einfach nicht diese Art von Kontrolle über die Auswahl des Browser da draußen zu tun, und noch ist es profitabel für Sie, es so zu versuchen, zu machen. Abnehmende Ertrag, dein Name ist IE6.
FWIW, klingt es auch wahrscheinlich, dass Sie besser hier tun würde, einfach eine Liste haben (<ul>) mit list-style-type auf keine und mit Hintergrundbildern Ihre 20x20-Icons angezeigt werden soll.
Andere Tipps
Sie jagen ein bewegliches Ziel. Mit so vielen broswers und so viele Versionen es wird höchstwahrscheinlich nie ein Weg, um es perfekt zu machen. Dann, auch wenn Sie tun, um es in der Nähe der nächste Version von einem des Browser zu perfektionieren kann es wieder brechen.
Hier ist meine Frage: Wenn es wirklich ein Tisch, warum nicht <table> benutzen? Es ist eine Sache, die Verwendung von Tabellen für die Zwecke des allgemeinen Seitenlayouts zu vermeiden, aber der Tisch-Tag ist immer noch vollkommen legitim, na ja, die Darstellung von Tabellen.
Wenn das nicht für Sie arbeitet, eine <ul> Modifikation oder ähnliches in Betracht ziehen. Es ist aber unwahrscheinlich, dass Sie jemals wirklich pixelgenaue in allen Browsern erhalten werden.
Ja ...
ein Bild machen;)
(Sorry, aber wenn Sie wollen, dass es „Pixle perfekt“ wirklich, dann ist dies wahrscheinlich der einfachste Weg)
ich mit Tony und annakata . Doch in der Regel das beste Ergebnis kommt von etwas Einfaches wie folgt aus:
<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>
, die zumindest sieht genau das gleiche in WebKit, IE8 und Firefox. (Ich glaube, IE7 auch, aber ich nicht getestet)
Ich bin Sory für diesen großen bearbeiten ich die Frage nicht richtig gelesen. Wie einige haben schon gesagt, es ist sehr schwer pixelperfection auf einer Website zu erreichen, wie jeder Browser unterschiedlich die Seiten machen. Mit CSS können Sie absolut und relative Positionierung im Grunde alles andere als seine bei weitem nicht perfekt verwenden, wenn es darum geht, Browser-Kompatibilität zu überqueren.
