Проблема отображения <ul> в Chrome

vzov · August 10, 2011

Доступен код:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег UL</title>
 </head>
 <body>
  <center>
    <ul>
      <li>Чебурашка</li>
      <li>Крокодил Гена</li>
      <li>Шапокляк</li>
    </ul>
  </center>
 </body>
</html>

Вот результат:

В Firefox 5 & Opera 11.50 правильно отображается, а вот в Chrome 13 нет, можно как-то в CSS правило написать чтоб решить эту проблему, так как текст берется с БД после сохранения с tinymce.

psywalker · August 10, 2011

ul {margin: 0; padding: 0;} ?

Vlad · August 10, 2011

Нет, тут не всё так просто. IE, кстати, тоже подобный баг выдаёт.

Сходу какая идея. Отказаться от списка или внутрь каждого пункта вкладывать <span>, для которого установить display: list-item или маркер через background.

Softlink · August 10, 2011

Интересно, не знал про эту особенность. Путем экспериментов дошел пока до такого варианта:

<!DOCTYPE html> 
<html>
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Тег UL</title>
<style>
body{
text-align:center;
}

ul{
display:inline-block;
}

</style>
 </head>
 <body>

    	<ul>
    	  <li>Чебурашка</li>
    	  <li>Крокодил Гена</li>
    	  <li>Шапокляк</li>
    	</ul>
 </body>
</html>

psywalker, не помогает обнуление.

Автору. Про доктайп не забывайте.

Bonzash · August 10, 2011

ol, ul {
	list-style: none;
}
li {    
    background: url(img.jpg) no-repeat; 
    background-position: 0 0;
    padding: 0 0 0 20px; 
}

:rolleyes:

Edited August 10, 2011 by Bonzash

Softlink · August 10, 2011

Все, сделал для всех браузеров. Везде отображается одинаково.

<!DOCTYPE html> 
<html>
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Тег UL</title>
<style>
body{
text-align:center;
}

ul{
display:inline-block;
list-style:inside;
}

</style>
 </head>
 <body>

    	<ul>
    	  <li>Чебурашка</li>
    	  <li>Крокодил Гена</li>
    	  <li>Шапокляк</li>
    	</ul>
 </body>
</html>

Работает и без inline-block;

vzov · August 10, 2011

Все, сделал для всех браузеров. Везде отображается одинаково.

Спасибо большое

psywalker · August 10, 2011

Ааа, вы в этом смысле, а я сразу-то задачу не понял)

Sign In

Проблема отображения <ul> в Chrome

Question

vzov

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Bonzash

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

vzov

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information