【发布时间】：2015-02-26 13:55:59
【问题描述】：
我正在为 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。
附言我读到使用 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=""> 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;
}
【问题讨论】：
-
看起来你会从CSS Reset 中受益。
-
我们的网站将特定于浏览器的规则视为一个很好的解决方案...第一天是 Operas...然后是 Firefoxes...在你知道之前这是一场全面战争...首先为工程师最不喜欢的浏览器添加规则。你今天仍然可以沿着那条街走，瓦砾看起来会有所不同，这取决于你通过哪个渲染引擎查看它……巨大的 CSS 炸弹空壳，周围的每个人都不敢触摸或移除，每一步都破裂了砖块爬行，因为它必须重新计算一切......疯狂。彻底的疯狂。是的，不要使用特定于浏览器的 CSS。
-
感谢回复，哪里是学习跨浏览器 CSS 编码的最佳场所？
-
这是一种只针对 Firefox 浏览器的方法，它似乎可以工作 stackoverflow.com/questions/952861/…
标签： javascript html css gruntjs