+ 1
Flexbox issues
I'm trying out some flexbox code. It works fine in IE but the flexbox code seems to be ignored by Chrome. I'm using the most recent versions of IE and Chrome. Any ideas?
6 Respostas
+ 3
You must prefix the flexbox properties with ( at least ) '-webkit-' in addition to the normal declaration ( and also the value 'flex' of 'display' property must be duplicate to '-webkit-box' ).
To easily handle this compatibility stuff of prefixing properties, you can use some online "css prefixer" like this one:
http://www.cssdrive.com/cssautoprefixer/
+ 2
Else post your code, or a link to it: it's easiest to debug something that we can study ;)
+ 2
Can you describe what you expect ( behavior in ie ), and how different Chrome is from? ( maybe post links to screenshots: I've not easily a window/ie under the hand :P )
I supposed you run Chrome under windows?
Have you tested how display others, as Firefox? Desktop and mobile devices?
All those details could have their weightiness ( it's not impossible, for example, that ie support badly Flex, and what you expect isn't the normal behavior ;) )
0
Thank you for that, visph. I did try the webkit prefix and a bunch of others but they didn't make any difference. it's strange because I just cut and pasted the code from a tutorial. I think I'll try the prefixer you suggested.
0
Here is the relevant css and html
.flex-container {
display: -webkit-flex; /* NEW - Chrome */
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="js/test.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div id="container">
<div id="box"> </div>
</div>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html>
0
Ok, the issue I am having as nothing to do with the code but the server. Shutting down the services and then starting them again makes the page display as expected. I don't know why it would impact only in Chrome and not IE, but that seems to have resolved the issue.
Costuma ter perguntas como essa?
Aprenda de maneira mais eficiente, de graça:
Quente hoje
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Game development
0 Votes
Ruby programming?
3 Votes