Question

我有CSS的问题，有人可以帮我吗？我可以为一个浏览器设计我的设计，然后在另一个浏览器中打破。

例如，如果我为Chrome修复它，那么它对Firefox不起作用，反之亦然......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Bookmark Storage</title>
<style>
.frmsub{


}

.btnsub{
position:relative;
left:-80px;
bottom:-24px;

}
.btnclear{
position:relative;
right:-30px;
top:0px;

}
.mltsub{
position:relative;
right:-30px;
top:375px;
}
.load{
position:relative;
right:290px;
top:30px;

}
</style>

</head>
<body background="http://www.dodaj.rs/f/1F/l0/2CSIzyy1/notebook1.jpg">
<div align="center">
<div align="center">
<form class="frmsub" action="./BK.pl" method="POST">
URL: <input name="HWID" type="text">  <br>
Short description(optional): <input name="HWID1" type="text1">  <br>
<input class="btnsub" value="Submit" type="submit"></form>
<form  action="./clear.pl" method="POST">
<input class="btnclear" value="Clear" type="submit">
</form></div></div>
<div align="center"><form method="POST" action="./multiBK.pl">

<input class="mltsub" value="Submit" type="submit">
</form><form method="POST" action="./AddS.pl">
<textarea name="HWID" rows="20" cols="50">Add bookmark source here, press load and then submit.
</textarea>
<input class="load" value="Load" type="submit">
</form></div>


<p align="center"></p>
<div align="center">
<div align="center">&nbsp;</div></div>
<p align="center">&nbsp;&nbsp;&nbsp;&nbsp; *Check your bookmarks: <a HREF="./newbm.html">Click</a></p>

</body>
</html>

看起来很重要，不要注意形式......

Answer 1

是的，就像Markus说的那样，使用像这样的CSS重置知道：http://meyerweb.com/eric/tools/css/reset/

如果在应用它之后仍然不能正常工作，那么代码可能有问题

Answer 2

尝试将其添加到css文件的顶部：

*{
margin:0;
padding:0;
}

Answer 3

尝试将此插件添加到css文件的顶部：

{
margin:0;
padding:0;
}

这样你可以测试是否存在一些默认的浏览器填充/边距问题而不使用一些大的css重置东西...

我可以告诉你的是，我认为问题在于你将它包装在

中，它具有默认的10px底部和顶部填充，所以可能尝试在你的css中将其重置为0 。

lineInput{
padding:0;
}

或者只是将该段改为div。

也许这就是解决方案，但也许它不是，因为你正在使用绝对定位......

我已经计算了px和图片两部分中的字母都是15px。在firefox下面，橙色部分末尾的字母为11px，而色度为8px。在firefox中，从字母顶部到橙色部分的开头有12px，在chrom中有10px。这就是5px的差异。

试试这个：

btnSubmit{
height:38px;
padding:0;
}

这将使按钮高38像素，字母将位于按钮的左上角。然后你可以加上这个：

text-align:center;
padding-top:10px;

//或者需要多少以Verticaly为中心。

不同浏览器CSS上的按钮位置

3 个答案: