Имам нужда от помощ, относно проблем свързан с четенето на CSS от IE.


0

Ето линка: http://cssdeck.com/labs/z9f6t607

Реших да направя спектъра на видимата светлина с помощта на CSS.

Успях да го направя за Hrom, Mozilla и Опера, но IE както винаги създава проблем. Не показва нищо, освен една линия. :(

Ето кода, с който редя цветовете:

 

background: -webkit-linear-gradient(0deg, rgb(227, 0, 255) 14%, rgb(0, 0, 255) 26%, rgb(0, 255, 0) 46%, rgb(255, 255, 0) 54%, rgb(255, 255, 0) 54%,  rgb(255, 128, 0) 66%,  rgb(255,0, 0));
 
background: -moz-linear-gradient(0deg, rgb(227, 0, 255) 14%, rgb(0, 0, 255) 26%, rgb(0, 255, 0) 46%, rgb(255, 255, 0) 54%, rgb(255, 255, 0) 54%,  rgb(255, 128, 0) 66%,  rgb(255,0, 0));
 
background: -linear-gradient(0deg, rgb(227, 0, 255) 14%, rgb(0, 0, 255) 26%, rgb(0, 255, 0) 46%, rgb(255, 255, 0) 54%, rgb(255, 255, 0) 54%,  rgb(255, 128, 0) 66%,  rgb(255,0, 0));
 
В последния ред, като махна тирето пред linear тръгва, обаче цветоевте се редуват по вертикала, а не по хоризонтала. Като сложа 90deg се оправя и всичко е нормално, но обръща ориентацията на всички останали браузъри.
Ако някой има някаква идея, как мога да се справя, ще съм му задължен!
 



Отговори



1

Коя IE използваш ?

Use this demo to create CSS background-image gradients. The CSS markup works in browsers (including Internet Explorer 10, Chrome, Firefox, Opera, Safari) that support CSS3 gradients in unprefixed form or with any of the following vendor prefixes: -ms-, -moz-, -o-, -webkit-.

Погледни това demo:

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

 


от dam_dam (578 точки)


0
IE10 използвам. :(

от jdimov (267 точки)


1
http://caniuse.com/#feat=css-gradients
linear-gradients се поддържа от IE 10. Потърси JS реализация.

от ipenev (1013 точки)


0
Той, го поддържа. За това спор няма. Обаче като оправя кода за него, се объркват другите браузъри и не се сещам, как да реша проблема.

от jdimov (267 точки)


2

Здравей! 
Можеш да погледнеш тези постове:
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

 


от vlad0 (6103 точки)


0
IE10. С Windows 8 съм.

от jdimov (267 точки)

0
Редактирах го понеже докато писах и вече се бяхте питали/отговорили с другите :) Погледни статията дали ще ти помогне?

от vlad0 (6103 точки)



2
Нямам много опит в тук, но предполгам, че може да изолираш IE като браузър и да му сложиш отделни стилове. Виж тук:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

от Teodor92 (13062 точки)


0
Благодаря! И това е много интересно. Ще огледам подробно и ще пробвам.

от jdimov (267 точки)


1

Най-лесно ще стане като си направиш два css файла и след това ги включиш в HTML  (от линка на колегата преди мен)

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->


<!--[if IE]> или по-точно <!--[if IE 10]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

В първия си пишеш за всички останали css-а, а във втория за IE10.

CSS може да го съкратиш, защото имаш доста повтарящи се неща.

Скалите може да ги съкратиш по следния начин

.fraun div
{
position:absolute;
color:rgba(255,255,255,1);
font-size:12px;
font-weight:bold;
font-family:sans-serif; // Пише се sans-serif, а не san-serif
top:170px;
width:40px;
height:20px;
text-align:center;
}

.skalachXXX {
left: XXXpx;
}

 

.hed го промени на h1 и в html махни <div class="hed"></div> и да остане

<h1>Visible spectrum</h1>

<!DOKTYPE html> се пише  <!doctype html> за html5

Избягвай ползването на кирилица в name на meta таговете.


от ipenev (1013 точки)


0
Благодаря за идеите! Ще опитам с два CSS файла. За шрифта си прав, изял съм буквата. :)))) Относно " се пише за html5" грешката не е моя. Явно тия от w3schools.com са сбъркали, а аз съм гледал от тях. :)))))

от jdimov (267 точки)


0
И аз имам един въпрос относно използването на градиентите, но в IE 6-9. Използвам следния код:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001F1F', endColorstr='#19A3A3',GradientType=1 ); /* IE6-9 */
Преди да сработи, страницата се появява съответно без фон, а съобщението гласи: Internet Explorer restricted this web page from runing scripts or ActiveX controls.
Allow blocked content
След като потвърдя, градиентът се визуализира.
Въпросът ми е защо в същото време отварям нормално други страници с включен градиент (същия код) без IE да блокира съдържанието. И какво да направя, за да отварям своята страница автоматично, без допълнително потвърждение.
Ще се радвам, ако някои би могъл да ми отговори.

от little_ray (0 точки)