2011-07-06 12 views
5

Mam dość częsty problem z IE8 na mojej stronie. IE8 renderuje moją stronę inaczej niż inne przeglądarki, co jest dość denerwujące. Chciałbym, jeśli ktoś mógłby pomóc, proszę!IE8 Problem z renderowaniem CSS (tabela)

Próbowałem dać IE8 własny arkusz stylów, ale nie wydaje się działać.

Oto strona z problemem:

http://www.routeqr.com/toimex/tuotteet

Przewiń w dół do sekcji obrazu, a zobaczysz, że pierwsza i druga colum kolumna dostaje zbyt dużo miejsca między nimi.

Znaczniki TH są również wyświetlane niepoprawnie.

IE nie renderuje tam marginesów, po prostu sprawdź tę samą stronę w Firefoksie lub w innej przeglądarce i powinieneś zobaczyć różnicę.

Byłbym bardzo wdzięczny, gdyby ktoś mógł mi pomóc, sam jestem tak zagubiony.

HTML kod

<table class="tuotekuvat"> 
<tbody> 
<tr> 
<th><a name="kannakkeet">&raquo; Kannakkeet</a></th> 
</tr> 

CSS

.custom .tuotekuvat th { 
float: left; 
margin-top: 15px; 
margin-bottom: 15px; 
padding: 10px; 
background-color: #333333; 
} 
+2

Otrzymasz więcej pomocy, jeśli opublikujesz kod zamiast pytania, które tylko wskazuje na twoją stronę internetową i poprosi nas o ustalenie, co jest z nim nie tak. Zobacz to pytanie, które zostało zamknięte: http://stackoverflow.com/questions/6596603/my-layout-is-not-working-properly – Slick23

+0

Czy możesz umieścić kod, aby pokazać, jak próbujesz nadać IE własny arkusz stylów ? Co masz na myśli mówiąc, że to nie działa? Arkusz stylów nie ładuje się, albo style nie robią tego, czego oczekujesz? – Ben

+0

Spróbuj otworzyć stronę internetową w IE8 lub IE9, a problem stanie się jasny. Komórki tabeli są renderowane większe dla pierwszej kolumny. –

Odpowiedz

2

tabela nie jest zakodowany prawidłowo, masz jeden th (komórka) bez colspans określony, aw samej table niektóre wiersze mają 6 komórek (kolumny), a niektóre mają 5. Każda przeglądarka może mieć kłopoty, że wieczór się;)

Wtedy są pływające jednolitego th - IE 7 i poniżej nie rozumieją pływaka w/elementu nagłówka tabeli i komórki będą zmuszając całość 1 kolumna być tak szeroki jak link nagłówka

Jeśli mogę zasugerować, abyś trzymał się jednej metody lub innej, albo unosząc nagłówek poza stołem, albo nawet umieszczając go w swoim własnym <thead> element - a następnie za pomocą table-layout: fixed na całej tabeli, aby kolumny były tak samo szerokie. które powinny pomóc nawet go .. ale głównie jeśli zdecydujesz, że tabela ma mieć sześć kolumn (czy wszystkie z nich są wykorzystywane lub nie), to na przykład, że pojedynczy th powinny być <th colspan="6">

uzyskać HTML stolik tuż pierwszy a reszta powinna być całkowicie w porządku w całej przeglądarce, jeśli chcesz sprawić, aby wyglądało na luki między wierszami tabeli i nagłówkami tabeli, można je umieścić pod numerem th .. ale naprawdę nie widzę potrzeby, aby unosił się on poza strukturą tabeli

+0

Dziękuję clairesuzy, miałem naprawdę spartaczony stół :) A tak na marginesie czy jest ważne kodowanie, jeśli w tabeli są puste komórki ? –

+0

@Juuso - bez obaw! Czy renderowałeś go tak samo w przeglądarce, kod repostu (edytuj pytanie, aby go dodać), jeśli nadal masz problemy - i Tak, puste komórki są prawidłowe :) – clairesuzy

+0

Pamiętaj, że naprawdę puste komórki tabeli często wygrywają " t renderuj poprawnie w IE, szczególnie jeśli masz styl na komórce (w przeciwieństwie do rzędu, na przykład). Spróbuj wstawić nieprzeciętą przestrzeń ( ) do komórki, aby to naprawić. –

0

Usuń lewy i prawy padding:
padding: 10px;
staje
padding: 10px 0px 10px 0px;

Nadzieja to pomaga!

N.S.

+1

Hej Nathan, to byłoby jedno rozwiązanie, dzięki za wgląd :) Zmieniłem TH colspan = "6", co wydaje się całkiem dobrym sposobem na zrobienie tego. –

0

W odniesieniu do pustych komórek <td>. Kiedyś było tak, że potrzebowałeś co najmniej jednego &nbsp;, aby był poprawnie renderowany w różnych przeglądarkach. Myślę, że nie może to już być sprawa z aktualnymi wersjami.

Na marginesie polecam używanie narzędzi takich jak firefox webdeveloper i firebug. Webdeveloper ma mnóstwo fajnych funkcji wraz z linkiem do w3c Validator, który pomógł mi znaleźć zniekształcony html.