simuler la “frontière intérieure” dans le CSS?

J'ai 4 divs avec le CSS ci-dessous. Le problème est, de la frontière sur le rouge span tire sur les autres. Comment puis-je éviter cela? J'ai essayé d'ajouter les marges de spanRed, même des marges négatives, ni de ce qui a fonctionné.

http://jsfiddle.net/eh9rM/

Points de Bonus Cela ne fonctionne pas sous IE (8,9 testé) à tous... que le bleu div s'affiche. 🙂

<div id="spanBlue"></div>
<div id="spanGreen"></div>
<div id="spanOrange"></div>
<div id="spanRed"></div>


#spanBlue      {position: fixed;
                top: 0px; left: 0px;
                height: 100%;
                width: 10%;
                background-color: #4D9DB8;
                border-right: 10px solid #045B6F;
                z-index: 1;}    

#spanGreen     {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 100%;
                background-color: #A4AC79;
                border-bottom: 10px solid #34655F;
                z-index: 1;}    

#spanOrange    {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 10%;
                background-color: #FA9D26;
                border-right: 10px solid #045B6F;
                z-index: 2;}         

#spanRed       {position: fixed;
                bottom: 0px; right: 0px;
                height: 90%;
                width: 90%;
                background-color: WHITE;
                margin-top: 20px;
                margin-left: 20px;
                border-top: 10px solid #B52024;
                border-left: 10px solid #B52024;
                z-index: 3;}

OriginalL'auteur Scott Beeson | 2011-11-14

  1. 7

    Vous avez deux options:

    1. Ajouter div { box-sizing: border-box }. Cette commutateurs d'éléments de la "traditionnelle", modèle, où les frontières et les rembourrages sont inclus dans la largeur (pris en charge à partir de IE8+)
    2. Utiliser le Modèle de Boîte Flexible (IE10+)
    3. Ajouter les frontières, comme les pseudo-éléments (IE8+)

    À l'aide de pseudo-éléments (supprimer la bordure de #spanRed):

    #spanRed:after {
    content:' ';
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0; 
    border:4px solid red;
}

    Garder à l'esprit que l'utilisation de position:fixed comme base pour une mise en page est très fragile.

    modifier: si vous avez besoin d'IE7 soutien, ajouter un élément supplémentaire via JS:

    $('#spanRed').append('<span class="after" />')

    Alors la référence dans le CSS. Soyez conscient que vous devrez répéter le style de l'ensemble, vous ne pouvez pas utiliser les deux sélecteurs ensemble, sinon IE7 ignore la règle.

    Ou, puisque ce sont tous des "inutiles" éléments de toute façon, il suffit d'ajouter le code HTML:

    <div id="spanRed">
   <span class="inner"></span>
</div>

    Voici votre code à l'aide de: http://jsfiddle.net/eh9rM/2/

    Il s'agit essentiellement d'un fond et non la mise en page principale. J'ai d'abord fait dans photoshop et il vient de faire une étiré en arrière-plan du corps, mais pensé que ce serait cool si ça a fonctionné. Aussi, toute solution qui n'est pas compatible IE7 n'est vraiment pas une solution pour moi, comme malheureusement la plupart des utilisateurs de mon entreprise sont encore sur IE7. 🙁

    OriginalL'auteur Ricardo Tomasi