2017-01-10 5 views
0

Я хочу сделать каждую страницу браузера одинаковой для моего сайта, но она отличается от хром, чем сафари. Кто-нибудь хочет мне помочь?Разнообразие в других браузерах

body{ 
 
\t background-image: url("http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/10/Forest-Wallpaper-HD-12.jpg"); 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t background-size: 1500px 1000px; 
 
\t background-attachment: fixed; 
 
} 
 

 
.header{ 
 
\t background-color: #000000; 
 
\t opacity: 0.8; 
 
\t height: 2500px; 
 
\t width: 1000px; 
 
\t background-position: center center; 
 
} 
 

 
.header h1{ 
 
\t color: red; 
 
\t size: 50px; 
 
} 
 

 
.top-banner{ 
 
\t background-color: #D1D1D1; 
 
\t opacity: 0.8; 
 
\t height: 75px; 
 
\t top: 100%; 
 
\t width: 100%; 
 
\t 
 
} 
 

 
.top-banner a { 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
\t font-family: Gang Of Three, alba, serif; 
 
\t color: rgba(134,130,255,1); 
 
\t 
 
} 
 

 
.top-banner a:hover { 
 
\t color: #FFFFFF; 
 
\t opacity: 0.7; \t 
 
} 
 

 
.top-banner img { 
 
position: relative; 
 
top: 15px; 
 
\t 
 
} 
 

 

 
} 
 

 
.lol { 
 
\t text-decoration: none; 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t line-height: normal; 
 
\t word-spacing: 250px; 
 
} 
 

 
.top-banner li { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t line-height: normal; 
 
\t word-spacing: 250px; 
 
} 
 

 
.header p { 
 
\t color: cyan; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Nexus Arts</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="layout.css"> 
 
\t \t <style> 
 
a:hover { 
 
\t \t color: #FFFFFF; 
 
\t \t opacity: 0.7; \t 
 
} 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t <div class="top-banner"> 
 
\t <ul class="lol"> 
 
\t \t <li><font color="Black" size="5px"><a href="index.html">Home</a>    <a href="projects.html">Projects</a> \t  <img src="assets/imgs/nexus.jpg" width="58px" height="42px"> \t \t \t \t \t <a href="Staff.html">Staff</a> \t \t \t <a href="Help.html">Help</a></font></li> 
 
\t </ul> 
 
\t </div> 
 
\t <center><div class="header"> 
 
\t <center><h1>Hello Everyone</h1></center> 
 
\t <center><h1>This Website is still in BETA</h1></center> 
 
\t <center><p>Welcome to anybody that went on this website</p></center> 
 
\t <center><p>Our initial release is March 13th 2017</p></center 
 
\t </div></center 
 
\t </body> 
 
</html>

Chrome: enter image description here Safari: enter image description here

Если вы, ребята, есть какие-либо предложения, мне нужны или просто изменить свой код :)

+0

Я чувствую, что эти два изображения с разных времен –

+1

Этот вопрос очень широк, идя вперед, я хотел бы попробовать быть немного более точным о том, что вы ищете, или то, что не хватает. – Tzshand

ответ

0

Почему вы положить все ваши навигационные ссылки в том же <li>? Это вызывает различное поведение, каждый браузер обрабатывает пустое пространство по-разному.

Поместите каждую запись самостоятельно <li> и используйте CSS, чтобы правильно разместить их.

0

Когда вы сталкиваетесь кодирования проблемы, это экономит головную боль сначала проверить, что у вас есть закрытый кронштейн для каждого отверстия и для HTML, закрывающий тег для каждого открывающего тега (если это требуется один.)

Ниже мы можно видеть, что две метки закрытия центра не хватает их «>»:

<center><p>Welcome to anybody that went on this website</p></center> 
<center><p>Our initial release is March 13th 2017</p></center 
</div></center 
</body> 

Большинство браузеров будут появляться, чтобы остановить чтение любой код, который следует

Мы видим обратное вещь в файле .css, где есть дополнительный «}»:

.top-banner img { 
position: relative; 
top: 15px; 

} 


} 

Кроме того, любая информация о стиле ниже этого кронштейна могут быть потеряны в зависимости от браузера.

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