jQuery DOCTYPE CSS Bug mit IE 6 & 7 - Quirks-Modus

StackOverflow https://stackoverflow.com/questions/1173771

  •  19-09-2019
  •  | 
  •  

Frage

Ok seltsames Verhalten, wenn es funktionieren soll:

Das Problem ist, wenn ich keine Doctype erklären die CSS arbeitet in IE 6 und 7, aber wenn ich die DOCTYPE erklären funktioniert es nicht. Warum ???

jQuery: 

$('tr:first-child').children().css({
   'width': settings.minWidth + 'px',
   'height': settings.tableHeaderHeight + 'px',
   'overflow': 'hidden',
   'white-space': 'nowrap',
   'color': 'blue'
});

HTML w / DOCTYPE - sehen Sie bitte in Firefox und IE 6 und 7 den Tabellenkopf Unterschied zu sehen

HTML wo / DOCTYPE - sehen Sie bitte in Firefox und IE 6 und 7 den Tabellenkopf Unterschied zu sehen

DOCTYPE Ich erkläre: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

So nach einem hilfreichen Kommentar fand ich, dass Quirks-Modus verwendet wird, wenn ich nicht hinzufügen, die DOCTYPE, die der CSS-Effekt ist, ich will aber mit einem DOCTYPE, Pfui !!!

irgendwelche Workarounds? Vorschläge?

Lösung, YEAH !!!

jQuery 

// This adds a div tag around the table header text 
//  - IE white-space bug in standard mode
$('table.className tr th').wrapInner(
  "<div class='ie_correct_header_whitespace'></div>"
);

CSS 

.ie_correct_header_whitespace {
   white-space: nowrap;
}
War es hilfreich?

Lösung

Zunächst einmal rate ich Sie ernsthaft, um es im Standardmodus zu arbeiten. Unter Berufung auf Quirks-Modus machen jedes Layout ‚einfach funktioniert‘ ist nicht ein sehr gesunder Ansatz.

Sie können Ihre Inhalte in einem Blockelement wickeln, lassen Sie uns ein DIV-Element sagen, und dann in Ihrem Tabellenkopf setzen Sie Ihre DIV. Überlauf und Breite sollte auf diese Weise im Standardmodus eingehalten werden, können Sie den gewünschten Effekt zu geben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top