文本偏移在div之下

时间:2011-02-06 23:48:46

标签: jquery css text vertical-alignment cufon

这应该很容易修复 - 但这不是因为IE7,或者至少是IE8兼容模式。

文本“IAN MARTIN”和“婚礼新闻摄影”应该整齐地隐藏在div #lefty,#righty和#left以及#right中。相反,它挂出了这些div的下半部分。

通过让h1和h2顶部位置在-20px附近很容易修复,但是在IE7中 - 文本弹出div的顶部......

怎么办?这似乎不是一个Cufon问题 - 我把它关掉来测试...

jquery动画会让我搞砸吗?我不这么认为,但我不是专家......

这是我的页面:http://ianmartinphotography.com/test-site/index-cufon-02.html

h1和h2的CSS:

h1 {position: absolute; letter-spacing: 4px;  color: #79868e; font-family: helvetica;   font-size: 38px;}

h2 {position: absolute; letter-spacing: 4px;  color: #969696; font-family: helvetica; font-size: 38px;}

感谢您的想法!

2 个答案:

答案 0 :(得分:2)

将以下CSS添加到h1和h2:

margin:7px 0 0 0;

在这里工作得很好。

答案 1 :(得分:2)

你的问题是,你告诉#left高50像素,然后在里面放一些需要100px(38 + 31 + 31)高度的东西,结果是内容溢出了它的父框。您需要让父级#left足够高,以完全包含其子级<h2>

但是,如果您将#left设置为height: 100px,那么您将需要重新定位“约”,“推荐”,...链接将是另一个50px,您将拥有添加另一个50px到.field的高度。您可能还需要调整其他一些heighttop值。

您还可以重新编写HTML和CSS,这样您就不需要绝对定位所有内容。简单地将三个<div>堆叠在一起可以给你相同的布局,同时不那么脆弱;然后是一些包装<div>和边距设置,使其水平居中并偏离页面顶部。