border-radius + " background-color == beschnitten Grenze

Betrachten div mit der border-radius, border, und background-color CSS-Attribute angewendet:

HTML:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

border-radius +

Betrachten wir nun ein ähnliches layout, aber mit der background-color angegeben in eine innere div:

HTML:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

border-radius +

Ich bin bestürzt durch die Tatsache, dass die background-color des innere <div> verschleiert die Grenze der äußeren <div>.

Dies ist ein Vereinfachtes Beispiel des Problems. In der Realität, ich bin mit einem <table> als das innere element mit abwechselnden Zeilen-Farben. Und ich bin mit einem <div> als das äußere element, da border-radius scheint nicht zu funktionieren, auf der <table> element. Hier ein jsfiddle ein sample von diesem problem.

Hat jemand einen Vorschlag für eine Lösung?

InformationsquelleAutor Kirk Woll | 2011-06-10

106

Versuchen overflow:hidden im äußeren div:

HTML:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

Das ist die bessere Antwort.

InformationsquelleAutor Dotan

Fügen Sie diesen CSS-Regeln:

tr:first-of-type td:first-child {
    border-top-left-radius: 5px;    
}

tr:first-of-type td:last-child {
    border-top-right-radius: 5px;    
}

tr:last-of-type td:first-child {
    border-bottom-left-radius: 5px;    
}

tr:last-of-type td:last-child {
    border-bottom-right-radius: 5px;    
}

Finden Sie in den aktualisierten fiddle.

Das ist sehr schön. Ich würde es vorziehen, eine version, die funktionierte im IE8 aber nehmen Sie wenn es ist das beste, was getan werden kann.

InformationsquelleAutor melhosseiny

3

Sie können dieses Problem beheben, durch die Anwendung overflow: hidden; um das element mit der Grenze. Eine viel sauberere Weg, denke ich.

InformationsquelleAutor Mark W

Macht eine Tabelle verwendet werden? Hier ist ein Beispiel für die Verwendung von DIV ' s: http://jsfiddle.net/6KwGy/1/

HTML:

<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

CSS:

.container {
    width: 100%;
}

.leftHalf {
    float:left;
    width:50%;
}

.rightHalf {
    float:left;
    width:50%;
}
.row {
    float: left;
    width: 100%;
}

#container .row:nth-child(odd) {
    background-color: #EEEEEE;
}
#container .row:first-child {
    border-top: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}
#container .row:last-child {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
}
#container .row {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

+1 für die Erkundung anderer Möglichkeiten. Aber da dies nutzt last-child es auch funktioniert nicht in IE8, so dass ich vermute, ich bin am besten ab, mit melhosseiny Lösung. (er wird kürzer)
Ich sehe schon, Sie konnte immer schaffen eine einzigartige Klasse für die erste und die Letzte Zeile mit dem border-radius-Stil.

InformationsquelleAutor ngen

0

Fügen Sie etwas Polsterung, oder die hintergrund-Farbe auf das äußere element
- Ich kann nicht hinzufügen Polsterung für design-Gründen. Und wie ich bereits erwähnt, ist die Hintergrundfarbe in meiner realen app ist von abwechselnd - Reihe von Farben, die unmöglich zu definieren, die auf dem äußeren element.
InformationsquelleAutor gnur
0

Wäre es akzeptabel, geben Sie dem div ein wenig Polsterung? So werden die Farben im hintergrund wäre das nicht zu Konflikten.
- Nein, es ist mir wichtig, dass die hintergrund-Farbe, die bündig mit dem Rahmen. (d.h., ich will nicht dieser)
InformationsquelleAutor ern

Könnte man hinzufügen, border-radius, um die child-element zu.

HTML:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE; border-radius:10px;">
    Blah
  </div>
</div>

InformationsquelleAutor Henrique Lobato Zago

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.