CSS HTML 表单的供应商前缀

Question

我正在为 5 种主要浏览器开发一个表单，想进一步了解 CSS 供应商前缀。表格在 firefox 中看起来不同，我通常将 div 移动到顶部和左侧 CSS 但只是想调整 firefox。从我读到的 -moz-margin-start: 10em;似乎是一种移动 div 但不起作用的方法。如何使用 css 仅在 firefox 中移动 div？

我这里也有一个前缀列表http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and use 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 边距。您可以轻松解决问题：

body {
    margin: 0;
}

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

希望对你有帮助，我没有走错路。

CSS HTML 表单的供应商前缀

CSS vendor prefixes for HTML Form

html

javascript

css

gruntjs