0

我一直在关注这个教程视频，它清楚地展示了关于 css3 中灵活框的所有内容。我在 Mozilla 或 chrome 上没有任何问题。但是框位于 Internet Explorer 中部分框的正下方。可以在此处找到演示（如果您在 Mozilla 上查看，即可以看到差异）。这是我一直在玩的html代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> First html5 </title>
<link rel="stylesheet" href="mainnew.css" />
</head>

<body> 
<div id="big_wrapper">
<header id="top_header">
<h1> Welcome to html5 </h1>
</header>

<nav id="top_menu">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Podcast</li>
</ul>
</nav>

<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of article</h1>
<h2>Subtitle for article!</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>- writtern by Emre Caglar </p>
</footer>
</article>

<article>
<header>
<hgroup>
<h1>Title of article2</h1>
<h2>Subtitle for article2!</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>- writtern by Emre Caglar </p>
</footer>
</article>
</section>

<aside id="side_news">
<h4>News</h4>
Emre has a new dog
</aside>

</div>


<footer id="the_footer">
Copyright mreonet 2012
</footer>

</div>
</body>
</html>

和CSS代码

body{
        width:100%;
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-pack:center;
        -moz-box-pack:center;
        box-pack:center;
    }
    #big_wrapper {
        max-width: 1000px;
        margin:20px 0px;
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        -moz-box-flex: 1.0; 
        -webkit-box-flex: 1;
        box-flex: 1;

    }
    #top_header {
        background:yellow;
        border: 3px solid black;
        padding:20px;
    }
    #top_menu { 
        border:red;
        background:blue;
        color:white;
    }
    #top_menu li {
        display:inline-block;
    }
    #new_div { 
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient:horizantal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;

    }
    #main_section {
        border:1px solid blue;
        margin:20px;
        padding: 20px;
        -moz-box-flex: 1.0; 
        -webkit-box-flex: 1;
        box-flex: 1;

    }
    #side_news {
        border:1px solid red;
        width:220px;
        margin:20px 0px;
        padding:30px;
        background:#66cccc;

我还注意到，当我在 ie8 上查看此页面时，它没有采用 css 样式。我对 html5 真的很陌生，可能会犯一些愚蠢的错误..

谁可以帮我这个事。顺便说一句，这是我的第一个问题，如果我错过任何事情，请告诉我并为此感到遗憾。

4

4 回答 4

1

IE 尚不支持 Flexible Box 模型。

http://www.w3schools.com/cssref/css3_pr_box-flex.asp

于 2012-05-16T09:54:02.713 回答
1

IE10 支持弹性盒子模型。

http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

事实上，我这周一直在玩浏览器前缀。

http://leaverou.github.com/prefixfree/#test-drive

于 2012-11-21T16:30:01.110 回答
0

IE 支持弹性框。但是 IE 1o 是基于 2012 年 3 月 22 日版本的 Flexbox 工作草案。使用 ms-flex-direction 来实现方向。行表示水平，列表示垂直。有关如何使用它的详细信息，请参见此处。

http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

例如

body
{   
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-align: stretch;
  -ms-flex-pack: center;
  border: blue; 
  width: 100%;
  height:500px
}

#box1 {
    width: 500px;
    display: block;
    background: black;
    border: black;
    border: 1px solid black
}

#box2 {
    width: 500px;
    display: block;
    background: red;
    border: red;
    border: 1px solid black
}
于 2014-02-25T21:53:44.493 回答
0

正如@Ravi 提到的，IE本身并不支持flex-box. 这是一个可用于在 IE 中启用它的 polyfill 。

于 2012-11-14T22:39:50.587 回答