IE9 sınır yarıçapı ve arka plan gradyan kanaması


191

IE9 görünüşte CSS3 standart tanımını kullanarak yuvarlatılmış köşeleri işleyebilir border-radius .

Sınır yarıçapı desteği ve arka plan gradyanı ? Evet IE9 her ikisini ayrı ayrı desteklemektir, ancak ikisini karıştırırsanız degrade yuvarlak köşeden dışarı akar.

Ayrıca, köşeleri yuvarlatılmış bir kutunun altında düz siyah bir çizgi olarak gösterilen gölgelerle garipliği görüyorum.

IE9'da gösterilen resimler:

taşma payı olmayan keskin köşeler kanama ile görüntü

Bu sorunu nasıl çözebilirim?


@MikeP ve @meanstreakuk ipuçları için teşekkürler. Ben aradığım cevap daha ne zaman IE gerçekten degradeleri / yuvarlama destekleyecek ya da ikisini birlikte çalışmak için nasıl alacağım satırlarında daha fazla olduğunu düşünüyorum.
SigmaBetaTooth

2'nin birlikte çalışmasını sağlamak için @meanstreak'in cevabına sahipsiniz. Gerçekçi olmak istiyorsanız, arka plan resimleri olarak SVG gradyanlarının tüm tarayıcılar tarafından css gradyanlarından çok daha erken desteklenmesi çok daha olasıdır (hala ağır geliştirme / tartışma aşamasındadır).
Kevin Peno

29
İnanılmaz MS şu ana kadar geride. 2011 ve IE hala bu tür sorunlarla uğraşıyor. zzzzzzz. .. sitelerinde "hızlı şimdi güzel" diyorlar. Tabiki öyle. Yukarıda yayınlanan resimlere bir göz atın. NE DİKDÖRTGEN GÜZELLİK!
SunnyRed

SunnyRed, iyi, köşeleri yuvarlatılmış köşeleri olan bir şeyde bulunan Chrome öğelerinde. Gerçekten, 2012 ve tarayıcılar hala bu tür sorunlarla uğraşıyor :-)
Joey

2
@SunnyRed 2013 şimdi ve hata hala orada :(
Sliq

Yanıtlar:


49

İşte herhangi bir arka plan rengini kaplayan yarı saydam bir görüntü oluşturmak için veri URI'sini kullanarak bir arka plan gradyanı ekleyen bir çözüm. IE9'daki sınır yarıçapına doğru kırpıldığını doğruladım. Bu, SVG tabanlı tekliflerden daha hafiftir, ancak bir dezavantaj olarak çözünürlükten bağımsız değildir. Başka bir avantaj: mevcut HTML / CSS'nizle çalışır ve ek öğelerle sarma gerektirmez.

Bir web araması yoluyla rastgele bir 20x20 gradyan PNG yakaladım ve çevrimiçi bir araç kullanarak bir veri URI'sine dönüştürdüm. Ortaya çıkan veri URI'si, tüm bu SVG karmaşası için CSS kodundan daha küçüktür, SVG'nin kendisi daha azdır! (Bunu koşullu olarak IE9'a yalnızca koşullu stilleri, tarayıcıya özgü css sınıflarını vb. Kullanarak uygulayabilirsiniz.) Tabii ki, bir PNG oluşturmak, düğme boyutundaki degradeler için harika çalışır, ancak sayfa boyutundaki degradeler için mükemmel değildir!

HTML:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

1
Ve kazanan ... Sanırım birini seçmek zorundaysam bu. IE aslında desteklediğini söylediğini ne zaman destekleyeceğini daha fazla bilgi görmek umuyordum. Arka plan görüntüsü çözümüne gelince, IE'nin davranmasını sağlamak için görüntüleri çekmemenin bir kısmı var. Yardımcı önerileri için herkese teşekkürler.
SigmaBetaTooth

1
Bu ayarın background-size: 100% 103%; background-position:center;daha iyi olduğunu gördüm . Her iki değer için% 100, üstte ve altta tuhaf bir kenarlık ekler.
Morten Christiansen

Arka plan boyutu ekleme:% 100% 103; Arka plan-konumu: merkezi; benim için hiçbir şey yapmaz.
Gregory Bolkenstijn

2
Neden sadece bir görüntü değil de veri uri kullandığınızdan emin değil misiniz? Sanırım bir görüntü ie9 kullanıcıları için sunucuya ekstra bir çağrı anlamına gelir, ancak tüm bu ekstra karakterlerin ie9 olmayan tarayıcılara gönderilen olması boşa gitmiş gibi görünüyor. Çözüm benim için bir görüntü olarak çalışıyor, açıklamayı çok isterim.
Decoy

4
Manuel veri URI'sı, bazı CSS ön işlemcilerinin dağıtım süresi boyunca normalde yaptığı şeydir. "Ama ne çirkin bir hack budur" olarak, bu kardinal bir saçmalık. SVG, bir vektör olmasına rağmen herhangi bir görüntüdür. Bu yüzden SVG'yi bir kesmek olarak adlandırmak ve bunun yerine bir PNG önermek mutlak anlamsızlıktır. SVG neden daha iyi? Çözünürlük bağımsızlığı, rasterleştirilmiş görüntü arka planı yerine kenarlık yarıçapını kullanmanızın nedeni.
skrat

104

Ben de bu problem üzerinde çalışıyorum. Başka bir "çözüm", degrade ve yuvarlatılmış köşeleri olan öğenin etrafına bir div eklemektir. Bu div'i aynı yükseklik, genişlik ve yuvarlak köşe değerleri yapın. Taşmayı gizli olarak ayarlayın. Bu sadece bir maske, ama benim için çalışıyor.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

3
Bu benim için mükemmel bir şekilde çalışıyor ve önerilen diğer çözümlerden çok daha basit.
Simon P Stevens

Şu anda kabul edilen cevaptan çok daha kolay. Bu IE9'da benim için çalışıyor.
Andy McCluggage

Bu ... çok üzgün ve acıklı. Bu 'HTML5' tarayıcısı !? IE10 için neden heyecanlı değilim.
Todd Vance

@toddv Endişelenme. Her şey yakında bitecek. Yakında değil, ama yakında. Bkz. Daringfireball.net/linked/2012/07/04/windows-hegemony Herhangi bir şansla, hiç kimse IE12'yi destekleme konusunda endişelenmek zorunda kalmayacak ... belki IE14 - bulanıklaşıyor.
jinglesthula

2
Yalnızca küçük bir not, ancak ileriye dönük uyumluluğu desteklemek için kenarlık yarıçapı ifadeleriniz tersine çevrilmelidir. Düzenlemeyi ben yaptım.
Parris

44

Ben birçok durumda degrade etkisi "sahte" ve IE9 çirkin kenarları önlemek için bir iç kutu-gölge kullanabilirsiniz bahsetmeye değer olduğunu düşünüyorum. Bu özellikle düğmelerle iyi çalışır.

Bu örneğe bakın: http://jsfiddle.net/jancbeck/CJPPW/31/

Düğme stilinin doğrusal gradyan veya kutu gölgesi ile karşılaştırılması


2
Benim durumumda mükemmel düzeltme çünkü bunu sadece bir düğme üzerinde kullandım ve tıpkı çizdiğiniz gibi bir gradyana ihtiyacım vardı. Şimdilik gte IE9 için koşullu yorumları kullandım ve daha sonra başvurdumbox-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Volomike

zarif ve basit. i ++.
Eliran Malka

1
Kutunun dışında düşünmek için +1. Sekmeler ve düğmeler için son derece iyi çalışır. İç metin kullanarak degradeyi öğenin içinde tutar.
GlennG

Bu gördüğüm en iyi çözüm. Saf css, fazladan eleman veya görüntü gerektirmez.
Zaqx

1
güzel hile ama sitenin her yerinde degradeler var. Hepsini aptalca değiştiremem.
Mehmet Fatih Yıldız

8

Bu sorunu çözmek için CSS3 PIE'yi de kullanabilirsiniz:

http://css3pie.com/

Tabii ki, sadece yuvarlatılmış köşeleri ve arka plan gradyanı olan tek bir öğeye bağlıysanız aşırıya kaçabilir, ancak sayfalarınıza birkaç ortak CSS3 özelliği ekleyip eklemediğinizi ve kolay destek isteyip istemediğinizi düşünmek bir seçenektir. IE6 + için


1
css3pie ve ie9 ile bile gradyanı görmüyorum. Yuvarlatılmış köşeleri ve alt gölgeyi görüyorum, ancak gradyan yok.
Kevin

7

Ben de bu hatayla karşılaştım. Benim önerim, ie9'daki degrade için tekrarlanan bir arka plan görüntüsü kullanmak olacaktır. IE9, görüntüyü yuvarlatılmış kenarlıkların arkasına doğru bir şekilde döşer (RC1'den itibaren).

Nasıl 1 satır CSS yerine 100 satır kod yazmanın basit veya zarif olduğunu göremiyorum. SVG harika ve hepsi, ama yıllardır degrade arka planlar için daha kolay çözümler olduğunda neden tüm bunları geçiyoruz.


5

Ben de aynı sorun sıkışmış n IE her ikisi de sınır yarıçapı ve degrade oluşturamıyor bulundu, her iki çatışma, bu baş ağrısını çözmek için tek yolu filtre kaldırmak ve svg kodu ile degrade kullanmak, sadece IE için ..

svg kodunu, Microsoft'un bu sitesinden degrade renk kodlarını kullanarak alabilirsiniz (özellikle degrade - svg için yapılmıştır):

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

zevk almak :)


Bağlantı artık geçerli değil.
ezmek

5

IE9 yarıçapını kırpmak için bir sarmalayıcı div (yuvarlak ve taşma gizli) kullanın. Basit, çapraz tarayıcı çalışır. SVG, JS ve koşullu yorumlar gereksizdir.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

4

Bu blog gönderimi bana yardımcı oldu: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Temel olarak, filtreyi kaldırmak için koşullu bir açıklama kullanır ve ardından arka plan görüntüleri olarak kullanabileceğiniz degradelerin SVG 'sprite'larını yaratırsınız.

Basit ve zarif!


Bunu yaşıyorum. Özellikle SVG kullanarak sprite oluşturma konusundaki araştırmamı Nihayetinde sonlandırmamda bana yardımcı olan büyük artışlar. SVG ölçeklenebilir ve sprite'lar mümkün olduğundan, SVG sprite paketlerini css gradyanlarından çok daha yönlü buluyorum ve yukarıda da söylediğim gibi CSS gradyanlarından çok önce tarayıcılarda% 100 destek görecek.
Kevin Peno

Oh, buna ekleyeceğim tek şey şu anda webkit ve inanıyorum ki, opera da CSS görüntü url()çağrılarında SVG'yi destekliyor . Bu nedenle, yalnızca bir tanesi solda tutulur, böylece 1000 koşullu bırakılır ve onu destekleyen her şeye bg için SVG sunulur. Diğer herkes için raster bir görüntü sunun. Sonra bu hack yönetilebilir hale gelir.
Kevin Peno

4

IE9, sınır yarıçapını ve degradeleri düzgün bir şekilde işler. Sorun IE9 , degradeye ek olarak filtreyi uygun hale getirmesidir . Bunu düzgün bir şekilde çözmenin yolu, filter özelliğini kullanan stil bildirimlerinde filtreleri devre dışı bırakmaktır.

Bunu en iyi nasıl çözeceğinize bir örnek olarak:

Ana stil sayfanızda bir düğme sınıfınız var.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

Koşullu bir IE9 stil sayfasında:

.btn { filter: none; }

IE9 stil sayfasına ana stil sayfanızdan sonra kafanızda başvurulduğu sürece, bu mükemmel bir şekilde çalışacaktır.


2
ie9 doğrusal degradeler oluşturmaz
James Westgate

3

IE9 altında sadece bir öğe ile çalışmasını sağlamanın basit bir yolu var.

Bu kemana bir göz atın: http://jsfiddle.net/bhaBJ/6/

İlk eleman Sınır Yarıçapını ayarlar. İkinci sözde Öğe Arka Plan Degradesini ayarlar.

Birkaç anahtar talimat:

  • ebeveyn göreli veya mutlak pozisyonda olmalıdır
  • üst öğe taşmalı olmalıdır : gizli ; (kenarlık yarıçapı efektinin görünür olması için)
  • :: before (veya :: after) sözde öğesinin z-endeksi olmalıdır : -1 (geçici çözüm türü)

Temel eleman bildirimi şuna benzer:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Sözde Öğe bildirimi:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}

Mükemmel! Teşekkürler! :)
Majimekun

Örneğinizde kenarlık yarıçapını 20 olarak ayarladım ve kenarlıklar IE9'da kırpılmadı
ezmek

Bunu başlığınızda ayarlamayı deneyin: <meta http-equiv = "X-UA-Uyumlu" content = "IE = 9" />
Marakoss

2

Bu hatayı geçici olarak çözmek için IE9'u köşeleri yuvarlayarak devre dışı bırakmaya karar verdim. Temiz, kolay ve genel olarak kullanılabilir.

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}

1

IE9'daki maske div iyi bir fikirdir. Biraz açıklığa kavuşturmak için bazı tam kod sağlıyorum. Düğmeyi bir DIV'ye sarmaktan memnun olmasam da, bir PNG maskesini gömmek veya SVG'yi kullanarak tüm çabaları harcamaktan daha kolay olduğunu düşünüyorum. Belki IE 10 düzgün bir şekilde destekleyecektir.

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>

1
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

Bunu bana yapıyordu ve "filtre:" hattını kaldırdığımda kanama gitti. Ayrıca PIE kullanıyorum.

kanamaları:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Kanama yapmaz:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Hızlı IE Gölge Düzeltme:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}


1

Gradyanı elde etmek için gölgeyi kullanabilirsiniz ve Internet Explorer 9'daborder-radius

Bunun gibi bir şey:

box-shadow: inset 0px 0px 26px 5px gainsboro;

0

Bu bir kapalı veya geçerli bir geçici çözüm olup olmadığından emin değilim ama ...

Kenarlık yarıçapının kenarlık genişliğinden daha büyük olması durumunda, sorunla karşılaşmadım. Aynıyken kare köşeleri alıyordum.


0

Pusula ve sass kullanarak bunu kolayca elde edebilirsiniz:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

Compass sizin için bir SVG görüntüsü oluşturur.

şöyle:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}


0

Benim için çalışıyor...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

css

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.