Flexbox issue between chrome and firefox

StackOverflow https://stackoverflow.com/questions/21535445

  •  06-10-2022
  •  | 
  •  

题

first question I've asked on here so forgive me if I put in too much or not enough information. I'm working on creating a nav bar that uses the flexbox. I've nearly nailed it except for when I take the #container and try to center it with margin: 0 auto; Chrome makes it look perfect and nothing seems to happen in firefox. Can anyone tell me if I've made an error in coding to cause this difference.

Here are photos URL=http://s74.photobucket.com/user/rdjromans116/media/Archive/Chrome_zps0015716f.jpg.html URL=http://s74.photobucket.com/user/rdjromans116/media/Archive/Firefox_zpsa50cf83f.jpg.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Relentless Pictures</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Chela+One|Belgrano|Revalia|Gloria+Hallelujah|Zeyada' rel='stylesheet' type='text/css'>
<link href="_css/normalize.css" rel="stylesheet" type="text/css">
<link href="_css/R3PHome.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<h1>Relentless Pictures</h1>
    <header id="mainHeader">
        <hgroup>
        <h2>Mission Statement</h2>
        <p>Hard work always pays off</p>
        <pre>
        Rawle Juglal
        <a href="tel://405-740-9697" title="Rawle Juglal">405-740-9697</a>
        <a href="mailto:rawledjuglal@gmail.com">rawledjuglal@gmail.com</a></pre>
        </hgroup>
    </header><!-- End of HEADER "mainHeader"-->
    <nav id="container">
    <h1 class="hide">Main Navigation</h1>
    <div id="one">
     <a href="#" title="homepage">Home</a>
    </div>
    <div id="two">
      <a href="#" title="production">Video/Audio Productions</a>
    </div>
    <div id="three">
      <a href="#" title="webDesign">Website Development</a>
    </div>
    <div id="four">
     <a href="#" title="applications" >Computer Programming</a>
    </div>
  </nav>

This is the CSS

#wrapper {
    width:100%;
    margin: 0 auto;
    background: #333;
}
#container {
    display:-webkit-box;
    display:-moz-box;
    /*display:flex; Seperate CSS sheet will be needed for IE*/
    display:box;
    box-orient:horizontal;
    width:80%;
    margin:0 auto;
    background-color:black;
}

#container div {
  background: rgba(15,15,15,1);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: block;
  text-align: center;
  border-radius: 5px;  

/*Shadow*/
-webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    padding: 10px 0px 10px 0px;
    width: 75px;
    margin: 10px 15px 10px 15px;
}

#container div:hover{
     /*Shadow*/
 -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);

  /*Gradient*/
  background-image: -webkit-linear-gradient(bottom, rgba(9, 142, 143, 1), rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(bottom, rgba(9, 142, 143, 1), rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(bottom, rgba(9, 142, 143, 1), rgba(0, 0, 0, 0.4));
  background-image: -ms-linear-gradient(bottom, rgba(9, 142, 143, 1), rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(bottom, rgba(9, 142, 143, 1), rgba(0, 0, 0, 0.4));
 }

#one {
    -moz-box-flex:0;
    -webkit-box-flex:0;
    -ms-flex:1;
    box-flex:0;
}

#two {
    -moz-box-flex:1.4;
    -webkit-box-flex:1.2;
    -ms-flex:1.2;
    box-flex:1.2;
}

#three {
    -moz-box-flex:1;
    -webkit-box-flex:0.90;
    -ms-flex:1;
    box-flex:0.90;
}

#four {
    -moz-box-flex:1.05;
    -webkit-box-flex:1.05;
    -ms-flex:1;
    box-flex:1.05;
}
有帮助吗？

解决方案

The Flexbox properties you're using come from the old 2009 draft and should never be used without also providing the standard properties. On top of being buggy, broken, and incomplete (particularly the Mozilla implementation), they will eventually be dropped in favor of the standard properties.

http://codepen.io/cimmanon/pen/iCfEu

#wrapper {
  width: 100%;
  margin: 0 auto;
  background: #333;
}

#container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  background-color: black;
}

#container div {
  background: #0f0f0f;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  /*Shadow*/
  -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
  /*Gradient*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  padding: 10px 0px 10px 0px;
  width: 75px;
  margin: 10px 15px 10px 15px;
}

.hide {
  display: none;
}

Note that I've eliminated all of your unique flex properties for your flex items, using justify-content instead. It should also be noted that using the table/table-cell display properties instead of Flexbox would be by far more efficient and have better browser support.

#container {
    display: table;
    width:80%;
    margin:0 auto;
    background-color:black;
}

#container div {
    background: rgba(15,15,15,1);
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: table-cell;
    text-align: center;
    border-radius: 5px;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top