Question

我的css有问题。

当我在IE和Firefox上打开我的页面时，它会像这样出现（就像它应该的那样） http://tinypic.com/r/14ni5gk/6

但是当我在Safari上打开我的页面时，它显示如下： http://tinypic.com/r/2mzdxed/6

（注意最后两个框没有相互浮动）

我有以下css代码：

@charset "utf-8";

body{
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
}

#container{
    width: 600px;
    background: #fff;
}

#header{
    height: 151px;
    background-image:url('../img/tomaat.png');
    background-repeat: no-repeat;
    background-position:center; 
}

#recent fieldset{
    width : 600px;
}

#stats fieldset{
    width : 600px;
}

#login fieldset{
    width : 200px;
    float: left;
    height: 150px;
}

#nieuw fieldset{
    width : 290px;
    float:left; 
    height: 100px;
}

#verwijder fieldset{
    width: 289px;
    height:100px;
}

label {
    width: 50px;
    float: left;
}

#login label{
    width: 200px;
    float: left;
}

input {
    width: 200px;
}

#nieuw button{
    position:relative;
    top: 5px;
}

#verwijder button{
    position:relative;
    top: 27px;
}

#login button{
    width: 200px;
    position: relative;
    top:5px;
}

#a {
    position : relative;
    top: 43px;
}
#buttonz {
    text-align: center;
}

legend{
    font-weight: bold;
}

以下index.php页面：

<?php
    include_once("db.php"); 
    session_start();
    if (!isset($_SESSION['uid'])){ 
        header("location:main_login.php");
        exit();
    }
    if (!isset($_SESSION['upass'])){ 
        header("location:main_login.php");
        exit();
    }
    $sql="SELECT * FROM users WHERE Naam='".$_SESSION['uid']."' AND Wachtwoord='".$_SESSION['upass']."'";
    $result=mysql_query($sql);
    $count=mysql_num_rows($result);
    if($count < 1){
        header("location:main_login.php");
        exit();
    }

?>


<?php
    $date = date("y-m-d");
    $vandaag = mysql_query("SELECT Type, Naam, Reden, Door FROM turfjes WHERE turfjes.Datum = '" . $date . "'");
    $names = mysql_query("SELECT Naam From users");
    $names2 = mysql_query("SELECT Naam From users");
    $names3 = mysql_query("SELECT Naam From users");
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tomaten turfjes pagina | 258</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            jQuery.noConflict();
        </script>
        <script src="js/prototype.js" type="text/javascript"> </script>
        <script src="js/scriptaculous.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"> </script>
    </head>

    <body>
        <div id="container">
            <div id="header">
            </div>
            <div id="info">
                <div id="recent">               
                    <fieldset>
                        <legend>Vandaag</legend>
                        <table border="0">
                            <tr>
                            <td>Type</td>
                            <td>Naam</td>
                            <td>Reden</td>
                            <td>Door</td>
                            <?php
                                while($a = mysql_fetch_array($vandaag)){
                            ?>      <tr>
                                    <td><?php echo($a['Type']);?></td>
                                    <td><?php echo($a['Naam']);?></td>
                                    <td><?php echo($a['Reden']);?></td>
                                    <td><?php echo($a['Door']);?></td>
                                    </tr>
                            <?php
                                } 
                            ?>
                        </table>
                    </fieldset>
                </div>
                <div id="stats">                
                    <fieldset>
                        <legend>Turfjesteller</legend>
                        <table border="0">
                            <tr>
                            <td>Naam</td>
                            <td>Aantal</td>
                            <td>Gedaan</td>
                            <td>Resterend</td>
                            </tr>
                            <?php
                                while($r = mysql_fetch_array($names)){
                                echo("<tr id=".$r['Naam'].">");
                            ?>
                                    <td><?php echo($r['Naam']);?></td>
                            <?php 
                                        $sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
                                        $result=mysql_query($sql);
                                        $count=mysql_num_rows($result); //count = adtjes
                                        $sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
                                        $result2=mysql_query($sql2);
                                        $count2=mysql_num_rows($result2); //count2 = turfje     
                            ?>
                                    <td><?php echo($count2);?></td>
                                    <td><?php echo($count);?></td>
                                    <td><?php echo($count2-$count);?></td>
                                    </tr>
                            <?php 
                                }
                            ?>
                        </table>
                    </fieldset>
                </div>
            </div>
            <div id="actie">
                <div id="nieuw">
                    <fieldset>
                    <legend>Nieuwe turfjes</legend>
                        <label>Naam</label>
                        <select id = "naamnieuw">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names2)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Reden</label> <input type="text" name="redennieuw" id="redennieuw"/>  <br>
                        <label>Door</label> <input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div>
                    </fieldset>
                </div>
                <div id="verwijder">
                    <fieldset>
                    <legend>Verwijderen turfjes</legend>
                        <label>Naam</label>                     
                        <select id = "naamverwijder">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names3)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Door</label> <input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div>
                    </fieldset>
                </div>
                <form name="logout" method="post" action="logout.php">
                <div id = "buttonz"><input type="submit" name="logout" value="Log uit"></div>
                </form>
            </div>
        </div>
    </body>
</html>

这些框都在div动作中并被称为nieuw和verwijder。 Nieuw是第一个，verwijder是第二个。

有谁能告诉我为什么会这样，甚至可能解决这个问题？

Answer 1

浏览器的默认设置与某些元素的填充，边距和字体大小略有不同（例如，UL上的填充或H1的大小）

CSS重置会清除这些，因此您可以使用自己的值。

周围有很多。我喜欢Yahoo CSS Reset 2，而HTML5则是HTML5 Boilerplate。

CSS不同浏览器意味着输出不同

1 个答案: