Wie center-a <div> - element im IE6

versucht zu implementieren eine dialog-box-Stil Verhalten über einen separaten div-Bereich mit all dem Zeug drin.

Wenn die "dialog-box" angezeigt werden soll, es hat auf dem display an der Mitte des FENSTERS, nicht in der Mitte der Seite, das heißt, UNABHÄNGIG von der scroling position. Zudem, die richtige Lösung wird sich nicht bewegen, den "dialog", wenn der Benutzer führt einen Bildlauf auf der Seite.

In Chrome und FF funktioniert dies mit position='fixed' und die Zentrierung der div in der intuitiven Weise.

Scheint dies nicht zu funktionieren im IE6 (offenbar behoben, wird nicht unterstützt es).

Irgendwelche Ideen?

InformationsquelleAutor gnosis | 2008-11-25
  1. 3

    Wenn ich du wäre würde ich es tun mit Hilfe von jQuery und ich würde vorschlagen, Sie versuchen es heraus zu. Dies sollte perfekt für jQuery-basierte Lösung [jQuery Version][1] oder probieren Sie

    body { 
    font: 80% verdana, arial, helvetica, sans-serif;        
    text-align: center; /* for IE */    
}   

#container {        
    margin: 0 auto;   /* align for good browsers */         
    text-align: left; /* counter the body center */
    border: 2px solid #000;         
    width: 80%;     
}
    InformationsquelleAutor Perpetualcoder
  2. 2

    Versuchen die beschriebene Methode hier.

    InformationsquelleAutor Piskvor cc-by-sa 3.0
  3. 0

    Verwenden overflow-y und absolute Positionierung zu emulieren Feste Positionierung im IE6 mit den folgenden Schritten:

    1. Erstellen eines absolut positionierten div-Element, und geben Sie den gewünschten oberen und linken Koordinaten auf der Seite

    2. Set html {overflow-y: } versteckt oder sichtbar, nicht nur die Standard-auto, oder Blättern Sie zu beseitigen, wird die Bildlaufleiste für die absolut positionierten div -

    3. Set body{overflow-y: } sein auto, oder Blättern Sie zum einfügen einer neuen Bildlaufleiste, die für den Körper Inhalt

    4. Set body { margin:0; height:100% } um sicherzustellen, dass der Inhalt scrollbar geht die Länge der Seite

    5. Set Obere und der linke Rand auf den Körper zu trennen, den Inhalt aus dem absolut positionierten div -

    6. Stellen Sie sicher, dass der doctype ist gesetzt, um die trigger-Standards-Modus in Internet Explorer

    7. Set das absolut positionierte div - top:50%; left:50%;

    8. Hinzufügen position:relative und die gewünschte Deckkraft zu der div-container

    Wenn der doctype ist nicht festgelegt, bewegen Sie den html-Regeln, um den body-tag, und der Körper Regeln, um eine wrapper-div

    <!DOCTYPE html>
<html>
  <head>
  <style>
  body { margin:0; margin-left: 14em; }

  #fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }

  #fixedbox { padding: 0.5em; border: 1px solid #000; }

  #container { height: 2000px; }

  @media,
    {
    html { _overflow-y: visible; *overflow-y: auto; }
    body { _overflow-y: auto; _height: 100%; }
    #container { _position: relative; }
    #fixedbox { _position: absolute; _top:50%; _left: 50%; }
    }
   </style>
  </head>
  <body>
    <div id="container">
      Fixed box
    </div>

    <div id="fixedbox">
      Homer
    </div>
  </body>
</html>
    InformationsquelleAutor Paul Sweatte
Schreibe einen Kommentar