Блог

Главная - Вопросы по программированию - Абсолютный позиционированный div отличается в Chrome и IE в отличие от Firefox

Абсолютный позиционированный div отличается в Chrome и IE в отличие от Firefox

#html #css

#HTML #css

Вопрос:

Итак, я разрабатываю свой сайт в Firefox, но я проверил его в Chrome и IE, и divs- s1, s2, s3, s4 сдвигаются примерно на 25-50 пикселей в других браузерах. Я думаю, что это связано с абсолютным позиционированием и изменением их родительского div на относительный, но я не могу заставить его работать.

CSS:

 root { 
display: block;
}

body, html {
width:100%;
height:100%;
overflow: hidden;
margin: 0;
padding: 0;
background: #6899D3; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebfaff', endColorstr='#fff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebfaff),  to(#fff)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ebfaff,  #fff); /* for firefox 3.6  */ 
}

#main-lead {
width: 500px;
height: 200px;
position: absolute;
top: 150px;
left: 150px;
}

#main-lead-header {
font-family: arial, tahoma, veranda;
font-size: 30px;
color: # 4a4a4a;
}

#main-lead-header-summary {
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #153E7E;
}

#navcontainer {
position: absolute;
bottom: 0px;
width: 100%;
height: 300px;
margin: 0;
padding: 0;
clear: both;
}

#summary-lead {
margin: auto;
border-spacing: 30px;
}

#summary-lead td {
width: 225px;
height: 50px;
padding-right: 10px;
text-align: center;
font-family: arial, tahoma, veranda;
font-size: 25px;
color: #036;
}

#summary {
position: absolute;
border-spacing: 30px;
}

#s1 {
position: absolute;
left: 125px;
bottom: 75px;
width: 200px;
max-height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E;
}

#s2 {
position: absolute;
left: 415px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#s3 {
position: absolute;
left: 700px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#s4 {
position: absolute;
left: 935px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}

#social {
position: absolute;
right: 25px;
top: 10px;
margin-right: 25px;
margin-top: 25px;
}

#login-wrapper {
right: 10px;
top: 75px;
font-family: arial, tahoma, veranda;
color: #24293f;
padding: 10px;
}

#login-wrapper label{
float: left;
width: 100px;
margin-top: 1px;
font-weight: bold;
}

#signup {
position: absolute;
right: 100px;
top: 200px;
width: 400px;
height: 250px;
background: #fff;
border: 1px dotted #000;
padding: 25px;
}

#signup label {
float: left;
width: 120px;
margin-right: 5px;
margin-top: 3px;
padding-top: 0.3em;
text-align: right;
font-weight: bold;
font-size: 15px;
font-family: arial;
color: #036;
}

.signup-input {
margin-bottom: 5px;
margin-left: 20px;  
border: 1px solid #000;
background: #fff;
padding-left: 10px; 
width: 190px;
height: 30px;
font-family: tahoma;
}

#signup-button {
float: right;
margin-right: 52px;
width: 75px;
background-color: #036;
border: 1px solid #000;
color: #ffffff;
font-size: 15px;
font-family: arial, tahoma, veranda;
padding: 5px;
}

#year {
margin-bottom: 5px; 
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 57px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#month {
margin-bottom: 5px; 
margin-left: 20px;
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 94px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#day {
margin-bottom: 5px; 
border: 1px solid #000;
background: #fff;
padding-left: 1px; 
width: 43px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}

#signup-lead {
position: absolute;
right: 150px;
top: 135px;
width: 400px;
font-family: serif, tahoma, arial;
font-size: 50px;
color: #ed1b23;
}

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel='stylesheet' type='text/css' href='./css/index3.css' />
</head>
<body>


            <span id="signup-lead"><i>Sign up!</i></span>
            <div id="signup">
                    <form id="signup-form" action="">
                    <label>First Name:</label>
                        <input type="text" class="signup- input" id ="firstname" name="firstname" /><br />
                    <label>Last Name:</label>
                        <input type="text" class="signup-input" id="lastname" name="lastname" /><br />
                    <label>Birthday:</label>
                        <select id="month" name="month">
                            <option  value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                        <select id="day" name="day">
                            <?php for ($i=1; $i<=31;  $i  ) { echo "<option value='$i'>$i</option>"; } ?>
                        </select>
                        <select id="year" name="year">
                            <?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?>
                        </select><br />
                    <label>Email:</label>
                        <input type="text" class="signup-input" id="signup-email" name="signup-email" /><br />
                    <label>Password:</label>
                        <input type="password" class="signup-input" id="signup-password" name="signup-password" /><br />
                    <label>Verify Password:</label>
                        <input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br />
                        <input type="button" id="signup-button" name="signup-button" value="Join!" />
                </form>
            </div>


    <div id="social">
        <img src="./images/twitter.png" alt="twitter" />
        <img src="./images/facebook.png" alt="facebook" />
        <img src="./images/flickr.png" alt="flickr" />
        <img src="./images/youtube.png" alt="youtube" />

    </div>
    <div id="main-lead">
        <span id="main-lead-header">The Most Crockin Site on the <b>Web! </b></span><br /><br />
        <span id="main-lead-header-summary">Crockshark.com is striving to  be the go to spot on the
        net for all your crock pot recipe needs. Join, submit, save, and  track-you can do it all here.</span>
    </div>
    <div id="navcontainer">
        <table id="summary-lead">
            <tr>
                <td>Find Great Recipes.</td>
                <td>Post Your Own.</td>
                <td>Save Some.</td>
                <td>Is Yours Popular?</td>
            </tr>
        </table>
        <table id="summary">
            <tr>
                <td id="s1">
                    <p>At Crockshark.com you can find tons of  great user submitted crock pot recipes.
                    From casual to gourmet, all recipes will prove to be crowd pleasing, time saving, and delicious.
                    Looking for a great crock pot meal?  You can find one here!</p>
                </td>
                <td id="s2">
                    <p>Whenever you want to share your  crockin' culinary skills with the world, just
                    submit a recipe.  It's easy! Just add the recipe name, ingredients, directions,
                    and chef extras to our easy to fill out form. It's time to show the world how you crock!</p>
                </td>
                <td id="s3">
                    <p>Scroll through our wide array of recipes and save them to your account with the click
                    of a button. You can sort by the newest recipes, by ingredient, and even by cuisine.
                    Preview the recipe before you save it or remove it just as easily!</p>
                </td>
                <td id="s4">
                    <p>With our recipe tracking engine, you can see how popular your recipes are by the number of times they are saved by other users.
                    Start using Crockshark.com today. It's free, easy to use, and signing up takes just 
                    few moments. Enjoy!</p>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Различия можно увидеть, перейдя к http://crockshark.com/index3.php в diff. браузеры. Есть идеи, я не могу разобраться в этом. Спасибо!

РЕДАКТИРОВАТЬ *

Итак, я разобрался. Я переместил 2 отдельные таблицы в собственные div и из «navcontainer». Выровнял их по абсолютным позициям на соответствующих высотах для более удобного размещения. Настоящая загвоздка в том, что оба вновь созданных div были слишком большими и перекрывались, что приводило к их различному выравниванию в противоположных браузерах. Я ужесточил их, чтобы не было перекрытия, и теперь они почти идентичны во всех браузерах.

Комментарии:

1. Вы проверяете с помощью функциональности `Inspect Element’, доступной в каждом браузере? (Предполагая, что вы используете IE9.)

2. Да, я проверил, но я ничего не вижу относительно того, почему s # divs смещаются вверх во всем, кроме Firefox.

3. Проверьте свой html и css на наличие тех списков ошибок, которые требуют исправления.

Ответ №1:

Это потому, что положение #navcontainer относительно нижней части экрана. Если вы хотите #navcontainer оставаться в согласованном положении, вам нужно будет установить что-то вроде top: 200px; (измените 200 пикселей, пока оно не будет выглядеть правильно) вместо bottom: 0px; .