Internet Explorer 中的文本被截断
在 IE 中查看我的网站时,网站描述看起来好像字母底部被切掉了。当然,在 Safari/Firefox/Chrome 中一切都很好,看起来也不错,但 IE 却让我难受。它是根据 WordPress 二十个主题制作的。
我调整了边距和填充,但没有运气。看起来减小字体大小会有帮助,但不能太小,否则会难以阅读。
任何帮助将不胜感激。
谢谢!
Alex
这是在 Safari 和 IE 中并排呈现的页面: http://screencast.com/t/b4YnDKANsg91
这是标题代码:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
When viewing my site in IE, the site description looks as if the bottom of the letters are cut off. Of course, everything is fine and looks nice in Safari/Firefox/Chrome, but IE is killing me. It has been made on the WordPress Twenty Ten theme.
I adjusted the margins and padding with no luck. It seems that reducing the font size helps, but it can't be much smaller or it will be unreadable.
Any help would be much appreciated.
Thanks!
Alex
Here is the page rendered in Safari and IE side by side: http://screencast.com/t/b4YnDKANsg91
Here is the header code:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果没有看到完整的CSS,我无法确定,但我怀疑溢出:可见可以解决这个问题。另一个选择器可能将其设置为剪切或隐藏...如果这不起作用,请尝试将高度设置为 em 单位而不是像素(例如 2em)。
I can't be certain without seeing the full CSS, but I suspect a overflow:visible would solve this. Another selector may be setting it to clipped or hidden... If that doesn't work, try setting the height to em units instead of pixels (2em, for example).