[英]CSS looks bad in IE
I am having a CSS problem in IE 我在IE中遇到CSS问题
This page looks fine in Firefox, chrome, opera....but on IE the "date bar" overlaps on the first <li>
bar 该页面在Firefox,Chrome,Opera ....中看起来不错。但是在IE上,“日期栏”与第一个<li>
栏重叠
Here : http://www.animefushigi.com/latest-episodes 此处: http : //www.animefushigi.com/latest-episodes
CSS is as followed : CSS如下:
#content h2.other-posts {
height: 31px;
font-size:12px;
line-height: 31px;
background: #2c2b2b;
padding: 0 10px;
border: 1px solid #1b1b1b;
color: #888888;
margin-bottom:1px;
}
#content #other-posts {
list-style: none;
padding: 1px;
margin-top:15px;
margin-bottom:15px;
margin-left: 20px;
}
#other-posts li {
list-style: none;
background: #151515;
height: 30px;
line-height: 30px;
border-left: 1px solid #050505;
border-right: 1px solid #151515;
border-bottom: 1px solid #050505;
border-top:1px solid #0f0f0f;
margin-bottom: 1px;
padding: 0 10px;
}
#other-posts li a {
float: left;
}
The Wordpress PHP file is as followed : Wordpress PHP文件如下:
<ul id="other-posts">
<?php
$postslist = get_posts('numberposts=50&order=desc&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<?php the_date('', '<h2 class="other-posts">Added on ', '</h2>'); ?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></li>
<?php endforeach; ?>
</ul>
How can I make this all-browser friendly? 如何使这个全浏览器友好的?
I would suggest you use IE specific conditional comments. 我建议您使用IE特定的条件注释。 That way you can target IE idiosyncrasies, with an IE specific stylesheet. 这样,您可以使用IE特定的样式表来定位IE特质。
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie/specific/css.css"> <![endif]-->
try: 尝试:
#other-posts li { display:inline }
instead of applying the display rule to "li a". 而不是将显示规则应用于“ li a”。 It's the list item that you want displayed inline, not the links inside. 这是您要内联显示的列表项,而不是其中的链接。
EDIT : Extremely sorry. 编辑:非常抱歉。 dun know where that 'without' came from. 邓不知道“没有”的来源。
Try Removing the float and specifying a width or height of the list. 尝试删除浮动元素并指定列表的宽度或高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.