Бъг в IE8 и Google Chrome

Вече двама души ми съобщиха, че под браузъри Google Chrome и Internet Explorer 8 блога ми не се изобразява правилно и двете колони вдясно се разместват.

Направих проверка и наистина с тези браузъри текста от средната колона навлизаше в дясната колона и изместваше цялото и съдържание извън колоната (виж картинката).

Като цяло кода на страницата си беше валиден XHTML и затова помислих, че става въпрос за промени по интерпретиране на CSS в тези нови браузъри. Прекледах какви са елементите на страницата. Двете колони вдясно са включени в две от колоните на HTML таблица. След доста време прекарано в преглеждане на CSS файла се сетих да проверя, кой е най-дългия от низовете в средната колона, който не съдържа интервали и се оказа че е "sites.google.com/site/zabolekarvsofia" (посочен от червената стрелка на картинката). Тук ми хрумна, че е ако браузъра възприема този низ като една единствена дума е нормално да не го пренася на нов ред. Веднага направих проверка, като сложих един интервал след знака "/" и така открих този елементарен, но труден за откриване:

Проблем:

Internet explorer 8 и Google Chrome неправилно интерпретират знака / като буква, в резултат на което дълги низове с URL адреси не се пренасят на нов ред и разместват текста по страницата.

Решение:

В моя случай трябваше да се погрижа или по някакъв начин да пренеса низа или да го скъся до 25 символа, за да се събере в колоната, като едновременно с това връзката към страницата, която е платила за SMS реклама да си остане непроменена. Намерих кода на плъгина за SMS реклама в директория /wp-content/plugins и промених тази част, която показва връзките.

Заместих реда:

<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Monaco; color: #c03030; background-color: #f1f1f1"><span style="font-kerning: none; color: #2060a0">echo</span><span style="font-kerning: none; color: #2b2c28"> </span><span style="font-kerning: none">"&lt;li&gt;&lt;a href="</span><span style="font-kerning: none; color: #2b2c28">{</span><span style="font-kerning: none; color: #a08000">$http_link</span><span style="font-kerning: none; color: #2b2c28">}</span><span style="font-kerning: none">"&gt;{$row-&gt;link}&lt;/a&gt;&lt;/li&gt;"</span><span style="font-kerning: none; color: #2b2c28">;</span></p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000"><span style="font-kerning: none">

със следния код:

<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Monaco; color: #a08000"><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1"> = </span><span style="font-kerning: none; background-color: #f1f1f1">$row</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">-&gt;<a href="http://www.php.net/link"><span style="font-kerning: none; color: #008080">link</span></a>;</span></p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Monaco; color: #a08000"><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1"> = <a href="http://www.php.net/preg_replace"><span style="font-kerning: none; color: #008080">preg_replace</span></a>(</span><span style="font-kerning: none; color: #c03030; background-color: #f1f1f1">'|/|'</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">,</span><span style="font-kerning: none; color: #c03030; background-color: #f1f1f1">'/ '</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">,</span><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">);</span></p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Monaco; color: #a08000"><span style="font-kerning: none; color: #2060a0; background-color: #f1f1f1">if</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">(<a href="http://www.php.net/mb_strlen"><span style="font-kerning: none; color: #008080">mb_strlen</span></a>(</span><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">)&gt;</span><span style="font-kerning: none; color: #0080a0; background-color: #f1f1f1">25</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">) </span><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1"> = <a href="http://www.php.net/mb_substr"><span style="font-kerning: none; color: #008080">mb_substr</span></a>(</span><span style="font-kerning: none; background-color: #f1f1f1">$link_text</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">,</span><span style="font-kerning: none; color: #0080a0; background-color: #f1f1f1">0</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">,</span><span style="font-kerning: none; color: #0080a0; background-color: #f1f1f1">25</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">).</span><span style="font-kerning: none; color: #c03030; background-color: #f1f1f1">'...'</span><span style="font-kerning: none; color: #2b2c28; background-color: #f1f1f1">;</span></p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Monaco; color: #c03030; background-color: #f1f1f1"><span style="font-kerning: none; color: #2060a0">echo</span><span style="font-kerning: none; color: #2b2c28"> </span><span style="font-kerning: none">"&lt;li&gt;&lt;a href="</span><span style="font-kerning: none; color: #2b2c28">{</span><span style="font-kerning: none; color: #a08000">$http_link</span><span style="font-kerning: none; color: #2b2c28">}</span><span style="font-kerning: none">"&gt;{$link_text}&lt;/a&gt;&lt;/li&gt;"</span><span style="font-kerning: none; color: #2b2c28">;</span></p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000"><span style="font-kerning: none">

Това ще доведе до пренасяне на нов ред на връзките след знака / ако не се събере в колоната. Текста на връзката става на повече от един ред, като адреса на линка остава непроменен. За всеки случай добавих и съкращаване на връзките до 25 сивмола, защото освен знака / е възможно да има и други знаци интерпретирани като букви.

Пробвах дали има проблем с други знаци:

не се пренасят на нов ред _ , . @ & ? + = ; пренася се на нов ред - това важи за всички браузъри.

Знаците / \ се обработват различно в различните браузъри - IE8 и Chrome не ги пренасят, Firefox - да.

Интересно е че със знака ! е обратно - при IE8 низа се пренася, а при Firefox и Chrome не.

Това са особености на браузърите, с които трябва да се съобразяваш, когато поставяш дълъг низ на място с ограничена ширина.