css3 uyumluluk modunda çalışmıyor, herhangi bir alternatif var mı?

-1

oldukça basit bir animasyonlu karo tipi düğmesi yapmak istiyorum. Sorunun ne olduğundan emin değilim (muhtemelen eski bir sunucu) ancak css3 özellikleri çalışmıyor. (Ie11 kullanıyorum, bu yüzden tarayıcımda çalışması gerektiğini biliyorum).css3 uyumluluk modunda çalışmıyor, herhangi bir alternatif var mı?

aşağıda benim kodu sorunlu olanları RGBA veya geçiş

geçici bir çözüm üzerinde herhangi bir yardım büyük takdir (I CSS3 nitelikleri olduğuna inanıyorum yanılıyorsam beni düzeltin lütfen) 'dir, Modernizr'i kullanmaya çalıştım ama sadece tamamen bambuldum.

<!DOCTYPE html> 
<html> 
<head> 
    <title>title</title> 
    <link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css"> 
    <style> 
.tile{ 
    height: 190px; 
    width: 190px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    max-width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    background-size:190px 190px; 
} 

.caption{ 
    background-color: rgba(0,0,0,0.4); 
    overflow: hidden; 
    color: #fff; 
    font-weight: bold; 
    margin: 150px 0px 0px 0px; 
    height: 190px; 
    width: 190px; 
} 
.caption:hover { 
    transition: margin .5s; 
    margin: 0px 0px 20px 0px; 
    background-color: rgba(0,0,0,0.4); 
    cursor: pointer; 
} 

#description{ 
    overflow: hidden; 
    margin: 25px 0px 0px 0px; 
} 
    </style> 
</head> 
<body> 
    <h1>Welcome</h1> 
    <div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" > 
     <div class="caption" onclick="alert('test');" > 
      <p>Some caption</p> 
      <p id="description">Some lengthy description that may potentially overflow into two lines</p> 
     </div>`enter code here` 
    </div> 
</body> 
</html>

düzenlemek :: bunun nedeni uyumluluk moduna aslında benim alt yazı gereği, bu geçici bir çözüm eğer öyleyse herkes biliyor siteyi kullanarak insanların çoğunluğu üzerinde zorunda kalacak? Şeffaflık İlişkin

kaynak

2016-04-13 elboffor

iyi çalışıyor. Ne probleminiz olduğu konusunda daha net olabilir misiniz? – KWeiss

Bu, Firefox ve Chrome'da çalışır. Böyle şeylerin IE'nin herhangi bir sürümünde veya Edge'de bile çalışması daha az olasıdır, ama neden olmadığını bilmiyorum. IE'de çalışmıyorsa, FF veya Chrome gibi daha modern tarayıcılarda daima kontrol etmelisiniz. – Rob

@Rob, IE – KWeiss

background: rbga(...) mülkiyet yoluyla şeffaflık sizin örnek başına just as expected in Internet Explorer 11 çalışıyor gibi görünüyor

Diğer bir seçenek benzer fonksiyonları CSS opacity özelliğini kullanmak olacaktır Sizin kullanım durumunuza, ancak sadece şeffaflık seviyesini işler. Ancak, hedeflenen öğeye ve öğenin tüm çocuklarına uygulandığı için biraz farklıdır, bu nedenle her zaman en uygun seçim değildir. Geçiş sorunu ise

opacity: 0.4;

...

Eğer elemanın dışına haldeyken çıkan geçişi istiyorsanız, ayrıca sigara vurgulu üzerinde transition özelliği gerekir hem de seçici:

.caption{ 
    /* Other properties omitted for brevity */ 
    transition: margin .5s; 
}

aşağıda gösterildiği edilebilir:

Olması beklenmeyen bir şey var mı? Https://jsfiddle.net/wmg7hxc4/:

kaynak

2016-04-13 12:31:17

Yanıtlarınız için teşekkürler, jsfiddle üzerinde kendim denediğim ve kodun doğru göründüğü gibi beklendiği gibi geçiş ve opaklık çalışmalarını biliyorum, buna neden olabilecek bir sunucu sorunu olup olmadığından emin değilim (çok eski). Bu yüzden geçiş ve rgba alternatifleri denemek gerekir. @Rion "opaklık:" uygulayarak tüm div etkilemez? – elboffor

Internet Explorer sürümünüzün herhangi bir uyumluluk modunda çalıştığı ihtimali var mı? Bu, yaşadığınız sorunların çoğunu kolayca açıklayabilir (eski sürümler veya Quirks modu bu yeni özellikleri desteklemeyebilir).Bunu, IE içindeki Geliştirici Araçlarını (F12) kullanarak kontrol etmeyi kesinlikle düşüneceğim. Ve “opaklık”, aslında, altındaki tek bir öğeye uygularsanız, “arka plan: rgba()” yaklaşımı tercih edilir. –

gibi jsfiddle ve diğer sitelerde çalıştığı gibi benim tarayıcı değil dediğim gibi. Bunun nedenini gerçekten bilmiyorum:/ – elboffor

css3 uyumluluk modunda çalışmıyor, herhangi bir alternatif var mı?

cevap

İlgili konular