Есть ли причина, по которой ширина градиента фонового изображения тела не всегда совпадает с полями div

Я хочу установить фон тела на 30.08% крема и 69.2% серый. Я делаю это с градиентом css. Тогда я хочу, чтобы все мои статьи были «margin-left: 30.08%;» для соответствия линии фона (поэтому фоновая линия, созданная градиентом, похожа на линейку). Вот кодЕсть ли причина, по которой ширина градиента фонового изображения тела не всегда совпадает с полями div

body{ 
position: relative; 
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777); 
} 
article{ 
    width: 300px; 
    height: 200px; 
    background: red; 
    margin-left:30.08%; 

}

Это прекрасно работает, но, как вы можете видеть в этом jsFiddle, например, в статье не всегда совпадают с линией градиентов. Поэтому, в зависимости от ширины браузера, в некоторых случаях это выглядит неряшливо. В примере jsFiddle вы увидите проблему, которую я имею, если вы измените размер окна на 652px (но это не единственная точка). К сожалению, эта радость в стольких разных точках, что я не думаю, что медиа-запрос будет выполнять эту работу.

Есть ли способ исправить это?

Благодаря

источник

2013-03-31 aurel

Почему такие неточные проценты? – BoltClock

Честно говоря, я не могу вспомнить, почему проценты настолько неточны. Но я уверен, что проблема будет существовать и в других процентных значениях. – aurel

Вы дали ширину вашего тела и высоту 100%

When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its container — but only if its container has an explicit width.”

, а затем вы используете

article{ 
margin-left:30.08%; 
}

30,08% от чего? как было сказано выше, вы должны использовать% only if its container (which in this case is a block level element <body>) has an explicit width.

Вы можете прочитать об этом здесь ..

Read it here

и я изменил код немного изменяя значения от% до пикселей

body{ 
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777); 

color: darker(#77777, 10%); 
width:300px; height:300px; 
}

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

Надеюсь, это поможет.

источник

2013-03-31 10:32:18 GeekyCoder

«30.08% от чего?» вот почему я думал, что должен положить 100% на тело. Я удалил ширину и высоту из тела, там нет разницы – aurel

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

не работает для меня! это результат с вашим кодом http://jsfiddle.net/6BDNR/2/ – aurel

Есть ли причина, по которой ширина градиента фонового изображения тела не всегда совпадает с полями div

ответ

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