Question

我正在为5个主要浏览器开发一个表单，并希望了解更多关于CSS供应商前缀的信息。表单在firefox中看起来不同，我通常会使用顶部和左侧CSS移动div，但只想调整firefox。从我所读到的-moz-margin-start：10em;似乎是一种移动div但不起作用的方式。如何使用css在firefox中移动div？

我在http://peter.sh/experiments/vendor-prefixed-css-property-overview/有一个前缀列表，并使用https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-margin-start。

P.S。我读到使用Grunt停止使用CSS供应商前缀的需要，是否值得设置？

<!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" xml:lang="en" lang="en">
<head>
    <title>title</title>

    <link rel="stylesheet" type="text/css" href="blueprint/blueprint/screen.css" />
    <link rel="stylesheet" type="text/css" href="blueprint/blueprint/src/typography.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--<link rel="stylesheet" type="text/css" href="blueprint/blueprint/ie.css" />-->
    <!--[if IE]>
    <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
    media="screen, projection">
    <![endif]-->

</head>

<body>
    <div class="container showgrid">
                <h2><center>Research Request Form</center></h2>



                <div> 
                    <input type="text" class="span-4" id="listcode">

                </div>
                <div>
                    <input type="text" class="span-4" id="sourceCode">

                </div>
                <div>
                    <input type="text" class="span-7" id="division">

                </div>
                <div class="span-24" id="wrap2">

                    <input type="text" class="span-23" id="projectName">

                </div>
                <div class="span-4">
                    <div class="span-4" id="interestCodes">
                        <p>
                            <input class="span-4" id="interestCodes" style="" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes" style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                            <p style="">&nbsp;Interest Codes</p>
                        </p>
                </div>
                <div>
                        <input class="span-18" id="listCodeAndName"style="" name="Text1" value="List code and Name:">
                </div>
                <div id="detailWrap">
                    <div id="details"> 
                    <p>Marketing Manager:  </p> 
                    <p>Marketing Director: </p> 
                    <p>Date Submitted:  </p> 
                    <p>Ideal Deadline: </p> 
                    <p>Quantity Submitted: </p> 
                  <p><input type="submit" name="submit" value="Send" /></p>                                                                 

                </div>

    </div>
</body>
</html>

body {
    background-color: #99FF99;
    font-family: verdana, sans-serif;
}
#listcode {
    height: 50px;
    margin-left: 22px;
}
.container {
    border:2px solid black;

}
#sourceCode {
    height: 50px;
    margin-left: 58px;
}
#division {
    height: 50px;
    float: right;
    margin-right:18px;
}
#wrap2 {

    display: block; 
    clear: both;

}
#projectName {
    height: 50px;
    margin: 20px 20px 20px 20px;

}
#interestCodes {
    margin-left: 10px;
}
#listCodeAndName{
    -moz-margin-end:10em;
    margin-left: 230px; 
    width: 688px;
    height: 160px;
    position: fixed;
    top: 224px;
    left: 146px;

}

Answer 1

如果我的问题正确，那么你的div容器并不完全位于左上角。这是因为浏览器有默认的css定义，比如body元素上的10px margin。您可以轻松解决问题：

body {
    margin: 0;
}

或者您最好开始使用CSS重置，例如normalize.css。

我希望它有所帮助，而且我没有走错路。

HTML表单的CSS供应商前缀

1 个答案: