Скругленные углы CSS не работают - почему бы и нет? - PullRequest
Новая
       15

Скругленные углы CSS не работают - почему бы и нет?

0 голосов
/ 17 сентября 2010 
<div id="main-solutions">
   <div id="main-solutions-top-left"></div>
   <div id="main-solutions-top-right"></div>
   <div id="main-solutions-body">
       blah blah blah
   </div>
</div>

CSS 

#main-solutions {
}

#main-solutions-top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
    width: 434px;
    height: 15px;
}

#main-solutions-top-right {
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
    width: 434px;
    height: 15px;
}

#main-solutions-body {
    background: url('../images/Gray-Gradient.jpg') repeat-x;
}

Я ожидаю увидеть, что у main-solutions есть два абсолютно позиционированных div в верхнем левом и правом углу с моим закругленным угловым изображением, а затем тело с градиентом, но когда я использую браузеры HTML-элементов, верхний левый и верхний правый div вообще не появляются, очень запутанный, почему эти div игнорируются?

ОБНОВЛЕНИЕ (для других, смущенных ответом):

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

http://www.w3.org/TR/WD-positioning-970131#Positioned

из раздела 2.2

Как «абсолютные» позиционированные элементы, «относительно» позиционируют, определяют новый система координат для дочерних элементов, с происхождением, расположенным в положение, где первый дочерний элемент отображается

Ответы [ 2 ]

4 голосов
/ 17 сентября 2010

Насколько я вижу, углы должны отображаться в верхнем левом и правом углу страницы , так как ваш контейнерный элемент div не имеет свойства CSS position. Позиции элементов с абсолютным позиционированием относятся к самому внутреннему родителю, у которого position отличается от static (по умолчанию).

Попробуйте добавить position: relative в CSS элемента контейнера. Он работает так же, как по умолчанию, но (1) если вы хотите, вы можете сместить позицию div на некоторую величину (что здесь не очень полезно, но все же), и (2), поскольку позиция больше не static, вещи с абсолютным позиционированием внутри div должны располагаться относительно контейнера, а не тела / страницы.

Кроме того, некоторые браузеры даже не отображают div без содержимого, поэтому фон для указанного div может не отображаться. Возможно, вы захотите иметь что-то в div. Даже один &nbsp; будет работать.

2 голосов
/ 17 сентября 2010

Рассматривали ли вы использование CSS border-radius для достижения этой цели, а не возиться с изображениями?

border-radius поддерживается всеми браузерами, кроме IE, но даже IE можно заставить работать с ним с помощью умной мелочи под названием CSS3Pie .

(плюс в качестве бонуса CSS3Pie также предоставляет IE CSS градиентные фоны, чтобы вы могли убить двух зайцев одним выстрелом)

...