HTML表单的CSS供应商前缀

CSS vendor prefixes for HTML Form

本文关键字：供应商 前缀 CSS 表单 HTML      更新时间：2024-05-26

我正在为5个主要浏览器开发一个表单，想了解更多关于CSS供应商前缀的信息。firefox中的表单看起来不同，我通常会用顶部和左侧的CSS移动div，但只想调整firefox。从我读到的-moz margin开始：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也

附言：我读到使用Grunt不再需要使用CSS Vendor前缀，值得设置吗？

<!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;
}

如果我解决了你的问题，那么你的div容器就不在左上角。这是因为浏览器有默认的css定义，比如body元素上的10px边距。你可以很容易地解决问题：

body {
    margin: 0;
}

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

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

相关文章：