0

参考全部指向：http : //smartgridcanadaconf.ca/2013/ 我在 ie8 中遇到了一个浮动问题，我无法通过为标题中的项目提供宽度来解决该问题 - 我也尝试过使用位置 -所以在这一点上 - 这是我关于 StackOverflow 的第一个问题 -

*如何让标题中的日期行与“保存日期”按钮内联？*

该站点是使用 ZURB FOUNDATION 第 4 版构建的，该版本具有 box-sizing 功能 - 我有一些 css 可以从这个 Gist 和评论中解决这些问题https://gist.github.com/zurbchris/5068210

我意识到我可以在一定程度上使用网格来解决这个问题 - 但是，我确实想弄清楚在尝试浮动元素 ie8 时我还应该寻找什么。

<section class="whiteOut whiteBG row">
  <div class="small-12 large-12 columns whiteBG">
    <ul id="socialnetworks" class="hide-for-small right">

        <li class="icon-linkedin-sign linkedinBtn icon-2x text-center"><a href="http://www.linkedin.com/groups/Smart-Grid-Canada-Conference-4018849?trk=myg_ugrp_ovr"></a></li>
        <li class="twitterBtn icon-twitter icon-2x text-center"><a href="https://twitter.com/CanadaSmartGrid"></a></li>
        <li class="mailBtn icon-envelope icon-2x text-center"><a href="maito:anne-marie.enns@sgcanada.org"></a></li>
    </ul>
    <ul id="date">
      <li style="width:337px" class="left">
        <h2>September 23-25th, 2013</h2>
        <a href="#"></a> </li>
      <li style="width:105px" class="left"> <a href="http://smartgridcanadaconf.ca/2013/?attachment_id=78"><span class="saveDate label"><i class="icon-calendar"></i> <span class="hide-for-small">Save to Calendar</span></span></a> </li>
    </ul>
    <div class="clear"></div>
  </div>
</section>

提前致谢。

4

2 回答 2

1

这可能是一个过于臃肿的修复，但在 Zurb 博客中，他们还提到了另一种方式：为不同版本的 Foundation 提供服务。

<!-- Foundation 3 for IE 8 and earlier -->
<!--[if lt IE 9]>
  <link rel="stylesheet" href="/css/foundation3/normalize.css">
  <link rel="stylesheet" href="/css/foundation3/foundation.css">
  <link rel="stylesheet" href="/css/foundation3/app.css">
<![endif]-->
<!-- Foundation 4 for IE 9 and earlier -->
<!--[if gt IE 8]><!-->
  <link rel="stylesheet" href="/css/foundation4/normalize.css">
  <link rel="stylesheet" href="/css/foundation4/foundation.css">
<!--<![endif]-->

在关闭正文标签之后：

<!-- Foundation 3 for IE 8 and earlier -->
<!--[if lt IE 9]>
  <script src="/js/foundation3/foundation.min.js"></script>
  <script src="/js/foundation3/app.js"></script>
<![endif]-->

<!-- Foundation 4 for IE 9 and later -->
<!--[if gt IE 8]><!-->
   <script src="/js/foundation4/foundation.min.js"></script>
   <script>
    $(document).foundation();
   </script>
<!--<![endif]-->

布局标记只是结合了 F4 和 F3 网格类：

<div class="twelve large-12 columns">

于 2013-06-28T18:21:40.627 回答
0

Box-Sizing 在 ie8 中是一个明显的问题——但我在 Safari 中也遇到了问题。通过从 css 中删除 ... 解决了问题：

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

这也解决了 FREETILEjs 的故障 - 在 Safari 中无法正常工作并且在所有浏览器中加载缓慢。

于 2013-12-06T17:50:37.713 回答