Почему Firefox не может прочитать путь к изображению с пробелом, когда находится внутри CSS?

Question

Например, что-то вроде этого правила в CSS

div.something { background-image: url(http://i2.photobucket.com/albums/y24/5609903697/Beyond Birthday/BB39.jpg); }

не будет работать в FF, но будет работать в IE, потому что между «Beyond» и «Birthday» есть пробел. Я знаю, что решение состоит в том, чтобы либо не иметь пробела, либо поместить% 20%, но просто интересно, почему IE может справиться с этим, а FF - нет.

Answer 1

Вы пробовали окружать URL одинарными кавычками?

background-image: url('/folder/file name.jpg');

Это не отвечает на вопрос почему, но я предполагаю, что это потому, что IE просто более щадящий и Firefox правильно анализирует CSS.

Answer 2

FF нужен URL для кавычек. Если вы отформатируете CSS следующим образом:

div.something {
  background-image:url('http://i2.photobucket.com/albums/y24/5609903697/Beyond Birthday/BB39.jpg'); 
}

... файл должен работать. По крайней мере, у меня это сработало, когда я попробовал с FireBug (при отсутствии кавычек не отображалось фоновое изображение).

Answer 3

Если вы не заключаете в кавычки свой URI, вы должны экранировать косой чертой любые символы, которые могут привести к тому, что значение не будет маркер URI. К таким символам относятся:

круглые скобки, запятые, пробельные символы, одинарные кавычки (') и двойные кавычки (")

См. http://www.w3.org/TR/CSS2/syndata.html#value-def-uri.

Когда в каком-либо правиле возникает ошибка разбора, все это правило отбрасывается. Совместимый браузер никогда не должен пытаться восстановиться после такой ошибки разбора. В этом случае Internet Explorer не следует рекомендациям CSS, и его поведение некорректно. (IE получает CSS неправильно. Что еще нового.)

Ваше правило CSS может быть исправлено путем цитирования, как указано выше, или экранированием следующим образом:

div.something {
  background-image: url(http://i2.photobucket.com/albums/y24/5609903697/Beyond\ Birthday/BB39.jpg);
}

Answer 4

Заменить пробел на "% 20", как будто он должен быть закодирован в URL?

Answer 5

Проще говоря, в кавычках.