Próbowałem automatycznie zmienić rozmiar obrazu za pomocą właściwości CSS max-width, ale to nie działa w IE7 i IE8. Czy istnieje sposób automatycznej zmiany rozmiaru obrazu za pomocą czystego CSS w IE7 i IE8?Jak automatycznie zmienić rozmiar obrazu w celu szybkiego projektowania z czystym css?
spróbować czegoś takiego:
width: expression(document.body.clientWidth > 800 ? "800px" : "auto");
/* If page is wider than 800px then set width to 800px, otherwise set to auto */
Source (warto przyjrzeniu)
Większość web-deweloperów wiedzieć, że IE spadła w tyle w wyścigu o standardy i jest w stanie pokazać najnowszy i największe. Wiele właściwości CSS2 nie jest obsługiwanych. Niektóre bardziej użyteczne z nich to właściwości takie jak maksymalna szerokość, maksymalna wysokość, minimalna szerokość i na końcu minimalna wysokość. Spróbuj tego:
<html>
<style>
p {
border:1px solid red;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto");
}
</style>
<body>
<p>
[alot of text]
</p>
Chociaż gardzę IE i/lub MS z różnych powodów, a jednym z nich jest to, że musiałem projektować prace dla IE6/7 :), nie sądzę, że IE10 "spadło w wyścigu o standardy". Oni są lub wrócą. – FelipeAls
Trzeba jednorazową pamięci podręcznej wyrażenie dla IE 6-7.
IMG {
zoom:expression(
function(t){
t.runtimeStyle.zoom = 1;
var maxW = parseInt(t.currentStyle['max-width'], 10);
var maxH = parseInt(t.currentStyle['max-height'], 10);
if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
t.style.width = maxW;
} else if (t.scrollHeight > maxH) {
t.style.height = maxH;
}
}(this)
);
}
Przykład: http://kizu.ru/lib/ie/minmax.html JS plik źródłowy: http://kizu.ru/lib/ie/ie.js
Autor: Roman Komarov
Zastosowanie width: inherit; aby pracować w czystym CSS w IE8. (Patrz responsive-base.css.) Podobnie jak ten:
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
Nie jestem pewien, czy to działa w IE7-proszę przetestować go i daj nam znać, jeśli testujesz IE7. Zanim zorientowali się technikę width: inherit używałem poniżej jQuery, więc można spróbować jeśli naprawdę potrzebują wsparcia w dół do IE7 i pierwszej techniki nie działa:
<!--[if lt IE 9]><script>
jQuery(function($) {
$('img').each(function(){
// .removeAttr supports SSVs in jQuery 1.7+
$(this).removeAttr('width height');
});
});
</script><![endif]-->
Uratowałeś mi życie. Dziękuję Ci! To działało idealnie w IE 8. Nie próbowałem w IE 7, ponieważ nie musimy tego wspierać. –
@JeremyGlover Awesome, tak, wiedziałem, że musi być jakiś sposób - próbowałem wielu rzeczy i "szerokość: dziedziczenie" jest tym, co podstępem. – ryanve
nie działa IE 7 & 8 rozpoznać następujące:
#my-div img
{
max-width:100%;
_max-width:100%;
}
Zastosowanie max-width: 100% z height:auto plus width:auto dla IE8:
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media \0screen
{
img
{
width: auto;
}
}
Jak chcemy także wsparcie dla mediów queries..You można użyć następującego PolyFill dodać obsługę zapytań medialnych IE6-IE8
https://github.com/scottjehl/Respond (bardzo małe, po prostu 1-2kb minified i spakowane) następnie użyj następujące css:
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
Przetestowałem go i działa na każdej przeglądarce
img{
height: auto;
max-width: 100%;
}
Nanba ładny pytanie ....... – anglimasS
'expression' są po prostu' javaScript' wewnątrz arkusza stylów, to won” t działa, jeśli użytkownik zmieni "ja" vaScript' down. Dlatego lepiej używać javaScript, aby zachować czystość arkusza stylów – steveyang
Tak, steven, masz rację, myślę, że używanie javscript jest lepsze zamiast używania nieczystego css. – Viduthalai