Floating div ' s in Chrome, erscheint aus der position
Ich habe ein problem immer drei Elemente schwimmen in Chrom. Im Grunde ist es ein Bild auf der linken Seite, mit zwei gefloateten divs auf der rechten Seite.
Problem ist die rigght schwebte Tauchgänge sind fallen auf den unteren Rand des Bildes. Ist dies ein bekanntes Problem in Chrome und wie kann ich es beheben? Scheint okay im IE, Opera, Safari & Firefox...
Dies ist der code:
<body>
<div id="container">
<div id="header">
<img src="image1.gif" width="320" alt="Logo"/>
<div id="social">
<img src="images/facebook_logo.png" alt="Facebook logo" width="25" />
<img src="images/twitter.png" alt="Twitter logo" width="25" />
</div>
<div id="review">
<img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/><div>
FREE service!
</div>
</div>
</div>
</div>
</body>
</html>und CSS:
* {
margin:0;
padding:0;
}
body {
background-image:url(../images/greenbg.png);
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:120%;
}
#container {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#FFF;
}
#header {
height:100px;
}
#header-image {
float:left;
}
/* flyout boxes */
#review {
float:right;
width:216px;
border-style:solid;
border-width:2px;
height:63px;
margin-right:20px;
}
#social {
float:right;
width:136px;
border-style:solid;
border-width:2px;
height:48px;
}- Können Sie uns einen screenshot oder ein Turnschuh?
- jsfiddle.net/Sc5K4 ich war schon mit ihm zu spielen. Und es funktioniert in meinem chrome.
- Mmm, nun, das ist in der Tat verwirrend. Zurück zum Reißbrett, vielleicht ein cache-Fehler... Danke beide
- Beide arbeiten für mich.
- Nein, das ist es nicht. Sogar mit dem exakt gleichen code gibt wilde Ergebnisse. Ein Beispiel ist bei www.alihurworth.co.uk/wrl2/temp4.html
- Ich habe auch ein ähnliches Problem. Ich habe noch eine Lösung finden, die dies behebt. Im wesentlichen, ich habe ein Recht float img-innen eine absolute (unten: 0) Fußzeile. Im responsive design, die img-versteckt auf kleineren Geräten. Bei der Rückkehr zum desktop, das img ist falsch positioniert.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für jeden, der Suche nach diesem Thema, ich hatte das gleiche problem auf ein Komplexes responsive design, wo zwei gleich große Links-gefloateten divs, der Rechte div ausgeglichen würde ~20 - 30px niedriger ist als der div-Element auf der rechten Seite.
Dies scheint ein Fehler zu sein mit Chrome, als die divs angezeigt, wie erwartet in jedem anderen browser (einschließlich IE9, IE8, & IE7).
Das problem: oberen Rand platziert auf der übergeordneten Hülle für diese zwei divs
Die Lösung: Verwenden padding anstelle, funktioniert in MSIE > 6, Opera, Chrome, FF, Safari
Hoffentlich spart einige von Ihnen einige frustration und Zeit, wie das war ziemlich nervig.
War ich in der Lage, Ihr problem reproduzieren endlich öffnen sich die Entwickler-Tools in chrome und dann auf der Suche in der
csscode der überprüfungdivund deaktivieren derfloatRegel und re-aktivieren. Ist dies, wie Sie das problem? Wenn dem so ist, dann muss die Lösung sein könntefloatingdas Bildleft. In meinem Fall machte es die Lösung.Wenn nicht, dann, wenn Sie ein Bild, wird es hilfreich sein.
Dank