2013-09-30 4 views
-1

как сделать закругленную угловую работу в браузерах IE8 у меня есть DIV со свойством фонового изображения прилагается к нему .. я хотел заменить фоновое изображение с CSS цвет ... Я добавил фоновый цвет, но не знаю, как сделать закругленный угол и заставить его занять только половину контейнера ... Я заменяю изображение цветом, чтобы сделать мое приложение быстрее ... вы можете мне рассказать чтобы исправить это предоставляя свой код ниже ...закругленной угол работы в браузерах IE8

<span class="position-ind all-values"> 
    <div class="color-ind">--outer container 
     <div class="all-values-light"/></div>--inner container 
    </div> 

    .gen-position-green-row .all-values .all-values-light{ 
     /*background-image: url('../img/positionIndicator_glow.png');*/ 
     background-color: white; 
     border: solid 1px; 
     /* the border will curve into a 'D' */ 
     border-radius: 10px 40px 40px 10px; 
    -webkit-border-radius: 10px 40px 40px 10px; 
    -moz-border-radius: 10px 40px 40px 10px; 
    } 
+1

Для IE8 свойство 'border-radius' не будет работать. Вы должны использовать свойство 'behavior' с' border-radius.htc'. Вы можете найти образцы кода [здесь] (http://starikovs.com/2010/08/24/css3-rounded-corners/) – Harry

+0

@Harry: можете ли вы добавить его в мой код ... я попробовал его не работать – user2565289

+0

@ user2565289: Вы загрузили необходимые файлы и поместили их в соответствующий путь? – Harry

ответ

0

Используйте css3pie или iecss3 просто включить файл как

.gen-position-green-row .all-values .all-values-light{   
     background-color: white; 
     border: solid 1px;  
     border-radius: 10px 40px 40px 10px; 
     -webkit-border-radius: 10px 40px 40px 10px; 
     -moz-border-radius: 10px 40px 40px 10px; 
     behavior: url("../css/PIE.htc"); 
} 
+0

вы можете добавить его в эту скрипку jsfiddle.net – user2565289

0

Вот хорошее решение для кросс поддержки браузераhttp://jquery.malsup.com/corner/

Посмотри jquery.corner.js для Jquery решения для различных стилей углов.

HTML:

<div id='ss' style='height:50px;weight:80x;background-color:red;'>Your content</div> 

JS:

$('#ss').corner("10px"); 

Примечание: Не забудьте скачать и добавить jquery.corner.js, как,

+0

можете добавить его в эту скрипку http://jsfiddle.net/ – user2565289

+0

Pls скачать и проверить его по-своему. У JsFiddle этого не было. –

0

PIE работает отлично до IE7.

Обратите внимание, что на некоторых серверах он не будет работать. Тогда u должен включить PHP в css, как это

(с путём к файлу php из исходной и скопированной формы на одном из моих сайтов ..) normaly вы бы включили HTC в css ... это не сработало для моего на моем онлайн-сервере локально он работал. Но когда я включил php, это было прекрасно

.container { 
z-index: 1; 
top:0; 
margin: 0 auto; 
background: #ffffff; 
border: 1px solid #efefef; 
width: 970px; 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
-webkit-box-shadow: #666 0px 0px 10px; 
-moz-box-shadow: #666 0px 0px 10px; 
box-shadow: #666 0px 0px 10px; 
behavior: url('assets/css/PIE.php'); 
} 
+0

можете добавить его в эту скрипку http://jsfiddle.net/ – user2565289

Смежные вопросы