-webkit-border-radius funktioniert nicht, Bild beschneiden, richtig

Habe ich 5 Browser zum Rendern von html-codierten Seiten: IE9, Firefox 4.0 und die neuesten Versionen von Chrome, Safari und Opera. Jetzt im IE9 und Firefox 4.0 ein Bild wird beschnitten richtig in die Verwendung von border-radius und -moz-border-radius: scheitert in Opera, Chrome und Safari mit -webkit-border-radius:. Mit Opera ist das Bild nicht abgeschnitten, und mit Safari und Chrome das Bild ist etwas abgeschnitten, sondern mit der Grenze abgeschnitten als gut.

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

Wenn du einer der 3 Browser erwähnt, dass die nutzen -webkit-border-radius: bitte die Bilder ansehen, zum Beispiel von dem, was ich habe ein Problem mit:
Grafiken Seite

InformationsquelleAutor StHelensBull | 2011-04-11

  1. 4

    Was Sie tun könnten, ist, setzen Sie alle das styling, die auf der <img> tag nun, der auf den übergeordneten <a> statt, so verwenden Sie es als container für das Bild. Diese, zumindest für mich, mehr Sinn macht, als gut. Vergessen Sie nicht, halten float: left auf das Bild, um loszuwerden, phantom unteren Rand entweder.

    Ich habe dieser erklärt im css: img{ ; dann mit der gleichen border-radius erforderliche syntax für die Darstellung eines border-radius, aber nichts scheint zu funktionieren. Die 3 Browsern (Safari, Chrome und Opera) sind die einzigen, die dieses Problem, IE9 und Firefox 4.0 funktionieren.
    Ich habe die alle stylings in den <a> - tag und immer noch nicht richtig gerendert wird, Schießen ein paar E-Mails, Safari und Google über diese und sehen, was Sie zu sagen haben, Dank an alle an diesem Thema.
    Hat diese Geige jsfiddle.net/matijs/UEC9D, tun, was Sie wollen?
    guten job auf dieser Problemumgehung für dieses Problem, dein Beispiel funktioniert ziemlich dang gut, nur müssen einige styling-Fragen (vor allem die hot-rosa Rand....lol), thanks a bunch!!
    was ist, wenn ich verwenden möchten, die position: relative auf die img?

    InformationsquelleAutor Matijs

  2. 2

    Ich denke, es ist, weil es im Vordergrund-über die Grenze

    versuchen Sie den gleichen code haben Sie oben, aber in deinem html:

    <div class="nonTyp" style="background-image:url('image.jpg');"></div>
    Das würde das erstellen von container-Bereiche für jedes img. Ich habe dies getan, um zu zeigen, wie dieses Problem zu beheben, aber würde gerne wissen, ob -webkit-border-radius: bug behoben wird.
    Dies ist der html-code für die oben genannten:
    <a href="images/non-typical-1.jpg" title="Klicken Sie, um zu sehen, großes Bild" onClick="Expand('images/non-typical-1.jpg', 600, 600); return false;" ><img class="nonTyp" src="images/non-typical-1.jpg" alt="Nicht Typischen" /></a>
    <a href="images/non-typical-1.jpg" title="Click to see large image" onClick="Expand('images/non-typical-1.jpg', 600, 600); return false;" ><div class="nonTyp" style="background-image:url('images/non-typical-1.jpg');"></div></a> Sie können immer noch hyperlink-Container, so lange Sie Breite und Höhe ein. was meinst du mit "wenn -webkit-border-radius: bug behoben wird."?
    Ich meine, dass, wenn Sie verwenden a-webkit-border-radius auf einem <img> es wird nicht richtig dargestellt, in Opera, Chrome und Safari. Sie werden feststellen, dass ich erklärt habe ein Klasse= für das Bild definiert ist, in einem externen stylesheet, welches auch erklärt, Breite und Höhe. Die syntax korrekt ist für alle Browser und macht, wie sollte es in Firefox 4.0 und IE9. Die einzige Lösung, dass ich-Figur zu nutzen, ist das erstellen eines div-Containers und mit background-image: die render-border-radius richtig. -webkit-border-radius für <img> ist der Fehler.

    InformationsquelleAutor Ninjiangstar

  3. 1

    Dies hat wohl zu tun mit der Reihenfolge, in der die Grenze vs. radius clip angewendet wird, aber ist sehr seltsam. Eine Lösung ist das verschieben der border-radius und die zugehörigen Definitionen für den umschließenden tag. Denken Sie daran, zu erklären display:block so behandelt wird als block-Ebene auf allen Browsern.

    InformationsquelleAutor Sajid

  4. 1

    Dieser arbeitete für mich in Chrome und Safari.

    Bild ist top-Niveau.

    div.someclass mit radius 5px und div.someclass img mit einem radius von 4px.

    Scheint, um die Ecken schauen Reiniger in Chrome und Safari. 

    .someclass {
  ...
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
          border-radius: 5px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
  -webkit-box-shadow: 0px 0px 5px #000; 
     -moz-box-shadow: 0px 0px 5px #000;
          box-shadow: 0px 0px 5px #000; 
}

.someclass img {
  ...
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px; 
          border-radius: 4px;   
}

    InformationsquelleAutor osxxso

  5. 0

    Ich denke, Zeichnung Funktionen, die Chrome verwendet für Bild und link sind anders funktioniert untereinander. Und das bewirkt, dass ein Leerzeichen zwischen Bild und den link.

    Ich teilweise diese Fehler behoben über die änderung Matjis' jsfiddle code ein wenig. Ich zog img-tags position nach Links.

    .gallery a img {
...
position:relative;
left: 2px;
}

    Diese Lösung kann funktionieren, wenn Sie unterschiedliche radius-Werte für das Bild und den link.

    InformationsquelleAutor tolginho

Schreibe einen Kommentar