2013-08-19 2 views
0

Я только начал изучать HTML/CSS, и я пытаюсь сделать личный сайт с нуля (без CSS инструменты)Chrome иногда делает мой HTML/CSS иначе

Когда я проверил мой сайт в Firefox и IE прошлой ночью она выглядела красивый и чистый, как видно http://i.imgur.com/vQd57rk.png

Когда я проверил мой сайт в Chrome мои ссылки вывозится вокруг: http://i.imgur.com/DjaziKg.png

кто-нибудь знает, что здесь произошло? Это моя разметка:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Home | Some Website!</title> 
     <style> 
      * { 
       padding: 0; 
       margin: 0; 
      } 

      body { 
       width: 960px; 
       font-size: small; 
       font-family: Verdana, Helvetica, Arial, sans-serif; 
       line-height: 1.6em; 
       background-color: #FFFFF0; 
       margin: 0 auto; 
      } 

      #header { 
       border-style: solid; 
      } 
      #header img { 
       margin: 4px 0px 0px 4px; 
      } 

      #header ul { 
       list-style-type: none; 
       display: inline; 
       margin: 25px 30px 0px 0px; 
       float: right; 
       font-size: x-large; 
      } 

      #header ul li { 
       display: inline; 
       margin: 0 30px; 
      } 

      #header li a:link { 
       color: #FF00FF; 
       text-decoration: none; 
      } 

      #header li a:hover { 
       text-decoration: underline; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!"> 
      <ul> 
       <li><a href="about.html">About Me</a></li> 
       <li><a href="resume.html">R&eacute;sum&eacute;</a></li> 
       <li><a href="projects.html">Projects</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </body> 
</html> 
+0

без проблем для меня тоже! это похоже на изображение Firefox. – Exception

+0

http://jsfiddle.net/dZJEr/ У меня тоже не было проблем. – Schleis

+0

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

ответ

0

#header ul Изменить определение CSS от display: inline; к display: inline-block;.

+0

О, хорошая идея! Спасибо за подсказку, я все еще новичок в этой вещи :) – Joseph

+0

Это сработало для вас? –

0

Каждый браузер интерпретирует вещи по-разному. Вы должны быть более конкретными, чем body { font-size: small }. Я рекомендую использовать значение px, если вы действительно не намерены оставлять его в браузере.

+0

Хорошо, спасибо, это хорошее предложение! – Joseph

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