div下方的文本偏移

Posted 2023-03-05

【中文标题】div下方的文本偏移

【英文标题】：text offsetting below div

【发布时间】：2011-06-22 11:13:40

【问题描述】：

这应该很容易解决——但这不是因为 IE7，或者至少是 IE8 兼容模式。

文本“IAN MARTIN”和“wedding photojournalism”应该整齐地塞在#lefty、#righty、#left 和#right div 中。相反，它挂在这些 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;

感谢您的意见！

【问题讨论】：

Cufon 在这个页面上是打开的，但是当我关闭它时，Helvetica 的同样问题，它默认为......

【参考方案1】：

将以下 CSS 添加到 h1 和 h2：

margin:7px 0 0 0;

在这里工作得很好。

【讨论】：

宾果游戏！谢谢！我猜这些边距设置会覆盖像 Mu 建议的内置标题标签边距？

没错，所有标签都定义了内置边距，因此您可以使用此处的 CSS 重置来代替上面的：dave-woods.co.uk/?p=187 它会让您的生活变得如此轻松。

【参考方案2】：

您的问题是您告诉#left 高 50px，然后在其中放入需要 100px (38+31+31) 高度的东西，结果是内容溢出其父框。您需要使父级#left 足够高以完全容纳其子级<h2>。

但是，如果您将#left 设置为height: 100px，那么您将不得不重新定位“about”、“testimonials”...链接，使其再向下 50px，并且您必须再增加 50px到.field 的高度。您可能还需要调整其他一些 height 和 top 值。

您还可以重新设计 HTML 和 CSS，这样您就不需要绝对定位所有内容。只需将三个<div>s 堆叠在一起，就可以为您提供相同的布局，同时不那么脆弱；然后一些包装器<div>s 和边距设置使其水平居中并从页面顶部偏移。

【讨论】：

谢谢，但很抱歉我不明白... 38+31+31 中的其他 31px 数字是什么？

@ian_6500：这是来自<h2> 的默认顶部和底部边距。特定的像素值是特定于浏览器的，因此您应该自己设置它们以获得一致的结果。抱歉，我应该更具体地说明高度的来源。

啊！知道了。我想知道默认标题标签设置中是否还有一些魔力——我只是假设通过为标题标签输入我自己的 CSS，它会关闭 CSS 默认值——我错了。

@ian_6500：您通常以“重置所有内容”块开始您的样式表，以确保您的所有 CSS 以已知且一致的状态开始。像这样的东西（例如）：meyerweb.com/eric/tools/css/reset