我对编码知之甚少。我正在尝试代表我们的前端开发人员进行研究。我们希望使用 CSS 3 和 HTML 5 重新设计我们的门户应用程序。我们的主要目标是拥有自适应布局来匹配用户可以访问的不同浏览器宽度。门户中还过度使用了 iframe,这就是我们希望应用程序适应整个浏览器宽度的原因。我们的用户主要使用 chrome、firefox,但也有少数人仍在使用 ie 8,且没有升级范围。我需要有关使用 HTML 5 和 CSS3 创建视觉设计的最佳方法的建议,这些设计可以在 IE 8 上呈现而不会中断。是否可以使用 HTML 5 和 CSS 3 创建应用程序,当用户在 IE 8 中打开应用程序时,该应用程序会自动切换到更简单但高效的布局。请帮忙。
modernizr.com jquery.com
请访问 caniuse.com,了解 IE 和 chromium 版本中不支持的功能列表。
您应该使用 HTML5 shiv。它允许在旧版 IE 中使用 HTML5 分段元素,并为 Internet Explorer 6-9、Safari 4.x(和 iPhone 3.x)和 Firefox 3.x 提供基本的 HTML5 样式。包含此文件:https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js
标题中包含这一行:
<!--[if lt IE 9]><script src="your-path-here/html5shiv.js"></script><![endif]-->
您还可以添加条件标签,在浏览器为 IE8 时为您的 HTML 指定一个类,以便在 CSS3 无法工作时添加 IE8 特定样式。
<!--[if lt IE 7]><html class="ie ie6 lte9 lte8 lte7"><![endif]-->
<!--[if IE 7]><html class="ie ie7 lte9 lte8 lte7"><![endif]-->
<!--[if IE 8]><html class="ie ie8 lte9 lte8"><![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
通过使用这些条件标记,您可以覆盖在 IE8 中不起作用的规则,并使其仅适用于该浏览器。例如,
.ie8 .button-style
您还可以使用 CSS3 Pie 来支持 CSS3 元素,例如阴影、渐变、过渡等。 PIE 通过包含一个小的 JS 文件,使得在旧版 IE 中使用 CSS3 成为可能。
display: inline-block
是你最好的朋友。此属性将指定如果两个东西并排放置在其容器内,则执行此操作,否则垂直堆叠它们。如果您遇到定位/显示问题,请尝试应用内联块。不幸的是,如果没有这个 hack,它就无法在某些较旧的 IE 版本中工作:
display: inline-block;
zoom: 1;
*display: inline;
IE8确实支持一些CSS3属性。您应该查看 caniuse.com。另外,为了获得最佳的跨浏览器支持,请使用CSS3供应商前缀。
祝你好运!
您可以使用Visual Studio作为前端开发软件,cs3和html5中出现了很多新功能,例如动画、Flex Box、渐变。还要看看 jquery、reactjs bootstraping。