【问题标题】:My height attribute is showing different results in firefox than all the other browsers (safari,chrome act). Why?我的 height 属性在 Firefox 中显示的结果与所有其他浏览器(safari、chrome act)不同。为什么?
【发布时间】:2012-04-02 00:03:40
【问题描述】:

我有一个简单的布局,并且徽标在 Firefox 中似乎有所不同,而且我似乎无法在所有浏览器中获得均匀的介质,因为当我更改蓝色框中字母“f”的高度时,它会影响所有浏览器浏览器。

我遇到的问题是 div“logofoxfont”,因为我希望字母“f”在所有浏览器中的位置相同,但在 Firefox 中似乎有所不同。

我该如何排序?

<html>
<head>
</head>
<link href="fw.css" rel="stylesheet" type="text/css">
<body>
<div class="topbox">
<div class="logobox"><div class="logoboxfont">
f</div></div>
<div class="logotext"></div>
</div>
<div class="midbox">
<div class="menubox"><div class="menuboxfont">Home<br>About Us<br>Staff<br>News<br></div>
<div class="menubox2"><div class="menuboxfont2">Appointments<br>
Price Guide<br>Emergency Services<br>Feedback<br></div></div></div>
</div>

</body>
</html>

而css是:

#logo{
background-image:url(40.jpg);
height:100px;
width:100px;
}

.topbox {
margin: 0px auto;
height:100px;
width:900px;
margin-top:0px;
background: #ffffff;
}

.logobox {
height:90px;
width:70px;
margin-top:10px;
background-color:#2FB2F4;
}

.logotext {
color: #333333;
font-family: Cambria;
font-size: 18px;
margin-top: -90px;
margin-left: 75px;
position:absolute;
}

#logotext1 {
margin-left:10px;
}

#logotext2 {
color: #00AAF5;
font-family: georgia;
font-size: 22px;
margin-top: -35px;
margin-left:10px;
}

.logoboxfont {
font-family:Cambria;
color: #ffffff;
font-size: 126px;
position:absolute;
margin-top:-20px;
margin-left:0px;

-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}

.midbox {
margin: 0px auto;
height:700px;
width:900px;
margin-top:0px;
background: #ffffff;
border-top: 1px solid #333333;
}

.menubox {
height:230px;
width:150px;
margin-top:10px;
background: #E6E6E6;
}

.menuboxfont {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}

.menubox2 {
height:160px;
width:150px;
margin-top:70px;
background: #FAFAFA;
position:absolute;
}

.menuboxfont2 {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}

感谢您的帮助!

詹姆斯

【问题讨论】:

  • 亲爱的,看看我的回答,如果我落后了,请告诉我。
  • 你的代码在我看来在 FF 和 Chrome 中是一样的,你是不是在 FF 下放大了?
  • 查看我的更新答案,其中包含 chrome 和 safari 的图像。我的小提琴在你想要的浏览器中工作。

标签: html css firefox cross-browser


【解决方案1】:

代码和演示见 fiddle:

小提琴:http://jsfiddle.net/kHtmf/1/

演示:http://jsfiddle.net/kHtmf/1/embedded/result/

火狐的SS:

铬的SS:

Safari的SS:

【讨论】:

  • 是的,就是这样,但我怎样才能让它在 firefox、safari 和 chrome 中看起来一样? Firefox 显示不同的边距和高度位置。有没有我可以制定的 Firefox 样式表?
猜你喜欢
  • 2013-11-07
  • 2017-08-25
  • 2018-06-06
  • 2012-08-10
  • 2011-11-21
  • 2013-08-12
  • 2014-03-31
  • 2014-05-04
  • 1970-01-01
相关资源
最近更新 更多