0
Я слежу за этим tutorial video here, он ясно показывает все о гибких коробках в css3. У меня нет проблем на мозилле или хроме. Но ящик размещен чуть ниже окна раздела в Internet Explorer. демо можно найти here (если вы посмотрите на mozilla, то есть увидите разницу). здесь HTML-кода, которые ив играли с:css3 flex-box internet explorer не соответствует правильно
<!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 и могу ошибаться.
Может ли кто-нибудь помочь мне в этом. Кстати, это мой первый вопрос, и если я пропущу что-нибудь, дайте мне знать и расскажите об этом.
Добро пожаловать на SO :) Вы тестируете все на IE8 или IE9/10? IE8 был (наконец) первой версией вполне нормально с CSS2.1, но имеет очень небольшую поддержку CSS3 и ни один для HTML5, кроме doctype (не считая функций, поступающих от MSIE, таких как @ font-face ...) EDIT: и, следовательно, нужно активация JS и полиполков для имитации этих функций. Подробности находятся на http://caniuse.com – FelipeAls
Спасибо в первую очередь :) Я тестировал на ie8 (без стиля вообще) и ie9 (как упоминалось некорректное выравнивание). какие JS и pollyfills необходимы. У меня нет никаких идей о них. Можете ли вы привести мне пример – Emre