Совместимая с браузером веб-страница
Я создал свою страницу index.html, а также мою страницу styles.css. Когда я запускаю его из Notepadd++, он выглядит хорошо в Chrome, но не в других браузерах IE и Firefox. Но когда я загружаю его на свой хостинг-сайт, он выглядит полностью разнесенным в Chrome и по-прежнему мешающим в двух других браузерах. Ссылка на мой сайт http://79.170.40.54/romeyb.com/ и я включил свой код. Как решить проблему кросс-браузерности?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css">
<!--<link rel="stylesheet" href="stylesheets/style-ff.css" type="text/css">-->
</head>
<body>
<br>
<script src="script.js"></script>
<div id="header">
<div id="logo">
<h1><img style="width: 200px; height: 100px;" alt="romeyb" src="images/logo.png"></h1>
<div id="navbar">
<ul>
<li class="home"><a href="index.html">home</a></li>
<li class="about"><a href="about.html">about</a></li>
<li class="blog"><a href="blog.html">blog</a></li>
<li class="resume"><a href="resume.html">resume</a></li>
<li class="contact"><a href="contact.html">contact</a></li>
</ul>
</div><!--navbar closing div-->
</div><!--logo closing div-->
</div><!--header closing div-->
<div class="gap"></div>
<div id="content">
<h1>Welcome to RomeyB.com <br></h1>
<p>Welcome to the website, romeyb.com, created by Romey B. This website is to showcase my skills in HTML and CSS, and content will be added as I go.</p>
<p>I will eventually add Javascript and jQuery to this site and will also design as I go.</p>
<p>I'm also learning Wordpress to become familiar with building websites using the Content Management System (CMS) technology, and to begin blogging in which I will discuss my personal battles with social anxiety, growing up without a father, and growing up as a non-stereotypical Black American.</p>
<p>I hope you enjoy the content that I will be posting here and I thank you for sharing this journey with me.</p>
<br>
</div><!--content closing div-->
<div id="right">
<p>This portion will consists of ads and possibly some updates to the website. Haven't decided yet.</p>
</div><!--right closing div-->
<div id="footer">© 2015 romeyb.com</div><!--footer closing div-->
</body>
</html>
1 ответ
Для кросс-браузерных сайтов это всегда проблема. Зайдя в веб-разработку, вы научитесь решать эти проблемы. А также IE всегда даст вам головную боль!
Теперь запомните, что это одно из решений, позволяющих сделать это красиво и рядом друг с другом без сумасшедших пробелов и дает вам контроль над пробелом. Есть много способов решить проблемы HTML и CSS. Это просто способ, которым я обычно делаю это.
Для вашего контента и правильной проблемы. У вас есть один, плавающий справа, а другой слева. обычно, когда вы хотите, чтобы они были рядом или сложены друг против друга, вы пропускаете их обоих влево. И тогда для промежутка есть разделитель "наполнителя" между ними.
Это похоже на ваш код, я просто уменьшил его, чтобы я мог увидеть это сам:
#content {
background-color: #E6E6FA;
float: left;
height: 400px;
width:1000px;
marign: 0 0 20 20;
}
#filler{
float: left;
height: 400px;
width:50px;
marign: 0 0 20 20;
}
#right {
background-color: #E6E6FA;
float: left;
height: 400px;
width:100px;
marign:5 5 20 20;
}
HTML:
<div id="content">
//your content
</div><!--content closing div-->
<div id="filler">
</div>
<div id="right">
//your ads
</div><!--right closing div-->
Работало у меня в chrome и firefox. Это выглядело хорошо. Вот кое-что, что помогло мне с плавающими div и пониманием этого:
http://css-tricks.com/all-about-floats/
И это старо, но все еще актуально, я думаю:
http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
И, пожалуйста, если я что-то пропустил, дайте мне знать или отредактируйте этот пост!