Совместимая с браузером веб-страница

Я создал свою страницу 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">&copy; 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/

И, пожалуйста, если я что-то пропустил, дайте мне знать или отредактируйте этот пост!

Другие вопросы по тегам