Div+Css兼容Ie和Firefox_html/css_WEB-ITnose
最近在写一个Div+Css布局的网站首页,以前写的页面都统一width:900px;不存在什么布局呀 什么float的设置。现在没办法呀!要对页面进行切割,分块。幸好,有点css的基础,不过用起来就比较郁闷了。在ie和firefox下,相同的属性值往往会有不同的显示效果。没办法 要兼容浏览器 只得一个一个bug去找。但完全兼容浏览器是无法做到的,所以也只能将个大概的效果展示出来,不要偏差太大太明显就行。
首先,需要提出的是float这个浮动属性,这是div+css布局的关键所在。float:left;float:right;是常用的浮动属性。为了使div能在一行排列,不得补用到它们。呵呵!不就是个float吗?这有什么好提的,要浮动我就float一下呀。哎!话是这么说,但真正用到时却出问题了。在ie下,只要前一个div有float:left;后面的div宽度不超过(总body的宽度)-(前一个div的宽度),后面的div就自动浮动,并排列在同一行。ie和firefox下,这点效果是一样。好,接着往下,下一行也这样布局,就分两栏吧。
#div1{}{width:200px;height:80px;float:left;border:1px solid blue;}
#div2{}{width:600px;height:80px;border:1px solid blue;}
style >
div >
div >
div >
div >
这样的布局,在 ie下和火狐下的显示效果就不同了 在firefox下的margin-top:20px;没效果。。。。
在ie下div3的margin-top有效果,而在firefox下却没效果。为什么?翻来覆去的想,终究没有想明白。没办法了,后来我有改css.偶然,给div2加上了float:left属性,然后margin-top:20px都有效果了。郁闷吧 呵呵 不过还是没弄明白为什么会这样,问题解决了就ok了!
下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left:10px;}的效果是不同的,这样设置的效果才会相同
ul{padding:0;margin-left:10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...
呵呵 愚昧的个人见解!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
