文本偏移到 div 下方
这个问题应该很容易修复——但这并不是因为 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;}
谢谢您的想法！
this should be simple to fix--but it's not because of IE7, or at least, IE8 compatibility mode.
The text "IAN MARTIN" and "wedding photojournalism" should be tucked neatly inside the divs #lefty, #righty, and #left and #right. Instead, it's hanging out the bottom half of those divs.
It's easily fixed by having the h1 and h2 top position be around -20px, but then in IE7--the text pops up out of the top of the divs...
What to do? This does not appear to be a Cufon issue--I turned it off to test...
Could the jquery animation be messing me up? Again I don't think so, but I'm no expert...
Here's my page: http://ianmartinphotography.com/test-site/index-cufon-02.html
And the CSS for h1 and h2:
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;}
Thank you for your thoughts!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将以下 CSS 添加到 h1 和 h2：
margin:7px 0 0 0;效果与此处类似。
Add the following CSS to h1 and h2:
margin:7px 0 0 0;Works well like that here.
你的问题是，你告诉
#left高度为 50px，然后在其中放入需要 100px (38+31+31) 高度的内容，结果是内容溢出了其父级的框。您需要使父级#left足够高，以完全包含其子级。但是，如果您将
#left设置为height: 100px，那么您必须将“about”、“testimonials”等链接重新定位为另外 50px向下，您必须在.field的高度上再添加 50px。您可能还需要调整其他一些height和top值。您还可以重新设计 HTML 和 CSS，这样您就不需要绝对定位所有内容。只需将三个
堆叠在一起即可获得相同的布局，同时又不那么脆弱；然后是一些包装器和边距设置，使其水平居中并偏离页面顶部。Your problem is that you're telling
#leftto be 50px tall and then putting something inside it that needs 100px (38+31+31) of height, the result is that the content overflows its parent's box. You need to make the parent,#left, tall enough to fully contain its child<h2>.However, if you set
#leftto haveheight: 100pxthen you'll have to reposition the "about", "testimonials", ... links to be another 50px down and you'll have to add another 50px to the height of.field. You'll probably have to adjust a few otherheightandtopvalues as well.You could also rework the HTML and CSS so that you don't need to absolutely position everything. Simply stacking three
<div>s on top of each other would give you the same layout while being less brittle; then some wrapper<div>s and margin settings to get it horizontally centered and offset from the top of the page.