CSS在Chrome,Firefox和Safari中运行良好,但在Internet Explorer中失败

时间:2016-11-08 02:30:51

标签: html css internet-explorer

我目前正在与一群朋友合作的网站上建立一个专注于教育计划的社区网站。正如标题所述,Internet Explorer是我们的CSS似乎无法运行的唯一Web浏览器。

这是指向该网站的链接: http://new.lexingtoncommunityed.org/

主要违法者在home.php页面和程序页面内。间距与其他浏览器的外观完全不同。

我们正在考虑制作新的IE样式表,但我们不确定在将css转换为与IE兼容时我们必须做的困难和做法,包括测试与其他浏览器的兼容性同样。使用框架重建CSS是否值得?

3 个答案:

答案 0 :(得分:1)

将margin-bottom添加到body而不是内部元素将解决IE的问题,并且不应该对其他浏览器产生负面影响。只需将margin-bottom: 200px添加到CSS中的body,它也适用于IE。

答案 1 :(得分:0)

  

使用框架重建CSS是否值得?

没有

2016年1月12日,Microsoft wrote

  

2016年1月12日之后,Microsoft将不再为旧版Internet Explorer提供安全更新或技术支持。

此外:

  

问:支持最新版本的Internet Explorer多长时间?

     

A: Internet Explorer是Windows操作系统的一个组件,最新版本将继续遵循安装它的操作系统的特定支持生命周期策略。
  在 Windows 7 ,Windows 8.1和Windows 10的生命周期内将支持Internet Explorer 11   要查找所有操作系统的支持生命周期日期,请搜索支持生命周期数据库here

所以,虽然它仍然“有效”,但它正在消亡。据官方统计。
当然,您可以更改您的CSS以使用它,但为什么?它自己的制造商说“不要使用它”!

来源:microsoft.com

答案 2 :(得分:0)

如果您可以确定footer的高度,则可以向身体添加margin-bottom。 否则你应该使用js来获取页脚的高度,并将其添加到正文的margin-bottom

或者你可以这样做。 如果内容的高度太短,则应将min-height添加到正文。



html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;color:#fff;}

.header{background-color: #ccc;}
.main{padding-bottom:100px;background-color: #999;}
.footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #333;}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>test</title>
</head>
<body>
  <div class="header">
    Top
  </div>
  <div class="main">
    <p>LCE is a self-sustaining, integral part of the Lexington Public Schools, committed to bringing lifelong learning to all. We provide practical, creative, and fun educational opportunities at reasonable cost. We seek to provide the best teachers and the most engaging subjects.

Our programs are open to all adults and young adults, regardless of residency. We also offer an extensive summer children's program called LEXPLORATIONS, which offers creative and academic classes.
</p>
  </div>
  <div class="footer">
    info@lexingtoncommunityed.org 
  </div>
</body>
</html>
&#13;
&#13;
&#13;