Вёрстка « IE7 border-radius-top-left

Как сделать закругленные уголки у блоков в ie7-8?
При чем нужно закруглить не все углы, а только верхние 2 к примеру.

1 ответов



.leftCol {
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright: 0px;
   -moz-border-radius-bottomright: 5px;
   -moz-border-radius-bottomleft: 5px;
   -webkit-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px; // верх-лево, верх-право, низ-право, низ-лево
   behavior:url(PIE.htc);
}
 

pie.htc должен лежать в директории с html файлами.

Я позанудствую...

Простите, но, если уж Вам нужны скруглённые уголки в IE 7-8, почему бы просто не решить это на уровне html - добавления условных комментариев с нужной разметкой для старых IE, вместо того, чтобы из-за парочки скруглённых углов тянуть за собой целый пирог?

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


кстати, проверил на виртуалке на чистом ie7 — пирог пашет!


Попробуйте PIE


Слышали о такой библиотеке CSS3PIE? Справляется с большинством CSS3 свойств вплоть до IE6. В ней достаточно подключить для IE библиотеку, перечислить в CSS классы, которые содержат те CSS3 свойства, которые должны работать как CSS3.

Существуют альтернативные решения на JS и на jQuery в частности. Curvy Cоrners, например. На сколько я помню, это одна из лучших разработок в этой области.

В последний раз я делал скругленные уголки, вставляя при помощи JS и наличии определенных классов в дивы картиночки со скруглениями, обрезающие "угловой" фон. Это оказалось самым быстрым "вариантом" в конкретном дизайне. Благо, фон был монотонным.


// функция быстрого поиска "классов" в элементах DOM.
function grrrrrrr(searchClass,node,tag) {
  var classElements = new Array();
  if ( node == null ) node = document;
  if ( tag == null ) tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      div = document.createElement("div");
      div.className = '_' + searchClass;
      els[i].appendChild(div);
      els[i].style.position = 'relative';
    }
  }

  //return classElements;
}

window.onload = function() {
  grrrrrrr("cbr"); grrrrrrr("cbl"); grrrrrrr("ctl"); grrrrrrr("ctr");
}
 

Ну и сами классы, которые будут позиционировать картинки.

.ctr, .cbr, .ctl, .cbl {}
._ctr, ._cbr, ._ctl, ._cbl {
  width: 10px;
  height: 10px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("/images/black-corners-sprite.png");
  position: absolute;
  z-index: 10000;
}

._cbr { right: 0; bottom: 0; background-position: 0 -30px;}
._cbl { bottom: 0; left: 0; background-position: 0 -10px;}
._ctr {  right: 0;  top: 0;  background-position: 0 -20px;}
._ctl {  top: 0;  left: 0;    background-position: 0 0; }