Zehn praktische und häufig verwendete CSS-Eigenschaften, die vom IE nicht unterstützt werden

Beschwerden über IE-Browser, insbesondere IE6, sind im Grunde in einen Zustand der Lähmung geraten. Gelegentlich haben sie sogar sehr negative Gedanken: Es wäre schön, wenn es nur einen Browser auf der Welt gäbe, selbst wenn der einzige Browser IE6 wäre. Natürlich ist eine solche Idee sehr krankhaft, also geben Sie sie sofort auf. In diesem Artikel stellen wir 10 CSS-Eigenschaften vor, die sehr real sind, aber vom IE nicht unterstützt werden. Das Auflisten dieser Eigenschaften bedeutet keine Kritik am IE (es ist sinnlos), aber es ist besser, wenn Sie verstehen, welche CSS-Eigenschaften vom IE nicht unterstützt werden . Lassen Sie uns gezielt CSS und Hack schreiben.

1. Gliederung

Beim Debuggen von CSS-Problemen füge ich häufig einen Rahmen zu einem bestimmten Element hinzu, um genau zu sehen, was mit diesem Element passiert, und um die Ursache des Problems zu ermitteln. Das funktioniert oft, weil ich dadurch eine genauere Sicht auf das Layout habe. Wenn es sich jedoch um ein Element auf Blockebene handelt, kann etwas schiefgehen. Das Hinzufügen eines 1-Pixel-Rahmens zu einem Element auf Blockebene wirkt sich wahrscheinlich auf das Layout aus, wodurch die Breite des Elements um weitere 2 Pixel erhöht wird.

Die Eigenschaft „outline“ ist ein perfekter Ersatz, da sie das Objekt rendert, ohne den Fluss des Dokuments zu beeinträchtigen. Allerdings unterstützen IE6 und IE7 das Outline-Attribut nicht, sodass es in diesen beiden Browsern nicht zum Debuggen verwendet werden kann.

2. Erben (Wert)

In der CSS-Entwicklung gibt es dafür viele Beispiele: Indem Sie bestimmte Stile für ein bestimmtes Element festlegen, um diesem Element mitzuteilen, dass es alle hinzugefügten Eigenschaften seines übergeordneten Elements „erben“ soll, können Sie eine erhebliche Menge an Tastatureingaben vermeiden.

Dies kann leicht durch die Einstellung inherit erreicht werden. Dies kann nützlich sein. Wenn Sie beispielsweise das Hintergrundattribut überschreiben, enthält das Attribut häufig viel Text (Farbe, Bild-URL, Standort usw.). Anstatt diese Werte neu zu schreiben, möchten Sie vielleicht einfach, dass das betreffende Element dieselbe Hintergrundeigenschaft wie sein übergeordnetes Element hat, und ein inherit-Wert reicht aus, um den Zweck zu erfüllen – was natürlich eine Menge Tastatureingaben einspart.

Leider werden Erbwerte in IE6 und IE7 nicht unterstützt (mit Ausnahme der Richtungs- (Textrichtung) und Sichtbarkeitseigenschaften).

Jemand sagte, dass Code wie der Rock einer Frau sei – je kürzer, desto besser, es scheint, dass der IE die Verwirklichung unseres Wunsches behindern wird.

3. Leere Zellen

Dieses Attribut wird nur für Tabellen oder Elemente verwendet, deren „display“-Attribut auf „table-cell“ gesetzt ist. Wenn Sie einer Tabelle dynamisch Inhalte hinzufügen, kann es vorkommen, dass der Inhalt einer bestimmten Zelle leer ist und Sie nicht möchten, dass der Rahmen, die Hintergrundfarbe, das Hintergrundbild usw. dieser leeren Zelle ausgeblendet werden.

Die Verwendung von „empty-cells: hide“ kann dieses Problem lösen, indem die Zellen, in denen diese Situation auftreten könnte, vollständig ausgeblendet werden.

Internet Explorer unterstützt das Attribut „leere Zellen“ nicht.

4. Beschriftungsseite

Apropos Tabellenattribut: Dieses Attribut wird verwendet, um den Tabellentitel zu deklarieren, der in der Seitenspalte der Tabelle angezeigt wird. Es akzeptiert vier Werte: oben, unten, links und rechts. Internet Exporer unterstützt dieses Attribut nicht. Der Tabellentitel wird in IE6 und IE7 immer oben in der Tabelle angezeigt.

5. Zähler-Inkrementierung / Zähler-Reset

Eine geordnete Liste (

) ist sehr praktisch, da sie Ihnen die Mühe erspart, aufsteigende Zahlen manuell hinzuzufügen, und es Ihnen ermöglicht, die Reihenfolge der Liste zu ändern, ohne die Zahlen zu ändern.

CSS verfügt über die Eigenschaften „Counter-Inkrement“ und „Counter-Reset“, mit denen Sie automatisch aufsteigende Zahlen für fast jedes HTML-Element generieren können, ähnlich einer geordneten Liste.

Hier ist ein Beispiel:

h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}

Der obige Stil fügt automatisch eine aufsteigende Zahl vor allen

-Tags hinzu und ermöglicht es Ihnen, bei h2-Tags den gleichen Effekt wie bei li-Tags zu erzielen.

Aber IE6, IE7 und sogar Safari (bis Version 3.x) unterstützen diese Eigenschaften nicht. Natürlich unterstützt IE6 auch nicht das Pseudoelement :before.

6. Min. Höhe

Manchmal erfordert das Design oder die Layoutstruktur einer Website einen Inhaltsbereich mit einer festen Höhe, da sonst eine bestimmte visuelle Wirkung verloren geht. Dies kann an einem Hintergrund mit Farbverlauf, einer einzigartigen Dropdown-Liste oder vielleicht an einem coolen Leuchteffekt von Photoshop liegen. Aber manchmal gibt es zwar viel Inhalt auf der Seite, die Seite lässt sich aber nicht wie erwartet erweitern.

Zu diesem Zeitpunkt müssen Sie das Attribut „min-height“ verwenden, da es den Browser anweisen kann, die Mindesthöhe für ein bestimmtes Element auf Blockebene darzustellen, unabhängig davon, ob die tatsächliche Höhe des Inhalts diese Mindesthöhe erreicht. Wenn der Inhalt dann die Mindesthöhe überschreitet, wird das Element entsprechend erweitert.

Das Einzige, was bei der Verwendung von min-height zu beachten ist, ist, dass es in IE6 nicht unterstützt wird. Wir alle wissen, dass IE6 (langsam) ausstirbt, aber einige Kunden verlangen möglicherweise immer noch, dass ihre Websites den verdammten Browser unterstützen.

Die gute Nachricht ist, dass IE6 den Höhenwert genauso wiedergibt, wie andere Browser „min-height“ rendern. Sie benötigen also nur einen IE6-spezifischen Hack oder ein eigenständiges Stylesheet, um eine bestimmte Höhe hinzuzufügen, und das Problem ist gelöst.

IE6 ignoriert auch min-width , max-height und max-width , aber die obige Methode ist auch für diese Eigenschaften machbar.

7. :hover

从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用javascript。

但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。

8. Display

Display 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。

所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。

其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。

9. Clip

这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：

p.clipped {
         padding: 20px;
         width: 400px;
         height: 400px;
         clip: rect(20px, 300px, 200px, 100px);
         position: absolute;
}

修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。

技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如

p.clipped {
	padding: 20px;
	width: 400px;
	height: 400px;
	clip: rect(20px 300px 200px 100px);
	position: absolute;
}

上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。

10. :focus

这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键 盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。

下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：

input:focus {
        border: 1px solid #f00;
}

               

Das obige ist der detaillierte Inhalt vonZehn praktische und häufig verwendete CSS-Eigenschaften, die vom IE nicht unterstützt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!