css - IE8 中的 CSS 问题

Question

我有 2 个 Div，一个 Div 应该出现在另一个 Div 旁边，并且它在所有浏览器中的工作方式与预期相同，但在 IE8 中，右 div 出现在左 div 下方，在 IE9 中同样工作正常，但问题是只有 IE8，如何克服这个问题，因为我没有太多使用 Css 的经验

 .leftcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:25%;
 }


.rightcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:80%;
 }

Answer 1

借助 IE 条件注释，您还可以使用 IE 的特定 css 进行重载

<!--[if IE 8]> pour IE 8.0 <![endif]-->

有几种使用它们的方法，2个例子：

• 在标题中添加特定的 css

• 和/或使用 ie8 类初始化主体，以便在您的 css 中定义：

_

.yourCssClass{
   /*common css attributes*/
}

.ie8 .yourCssClass{
  /*ie8 specific css attributes*/
}

Answer 2

注意你的宽度：25% + 80% = 105% ..这是不对的..

一个已知的 IE 8 错误是它解析宽度的方式与其他浏览器不同。它解析 20% + 80% + [something else] > 100%.. （见评论：可能与 avrahamcool 建议的内联块有关）

解决此问题的一种常见（也是最简单）的方法是稍微降低宽度，例如：

 .left_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:19%;
 }


.cal_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:79%;
 }

19% + 79% = 98% IE 会正常运行。