Проблема с Flexbox между chrome и firefox

первый вопрос, который я задал здесь, так простите меня, если я добавлю слишком много или недостаточно информации. Я работаю над созданием навигационной панели, использующей flexbox. Я почти прибил его, за исключением тех случаев, когда я принимаю #container и пытаюсь центрировать его с помощью margin: 0 auto; Chrome делает его идеальным и ничего не происходит в firefox. Может кто-нибудь сказать мне, если я сделал ошибку в кодировании, чтобы вызвать эту разницу.Проблема с Flexbox между chrome и firefox

Вот фотографии 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:[email protected]">[email protected]</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>

Это 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; 
}

источник

2014-02-03 Rawle Juglal

Свойства Flexbox вы пользуетесь родом из старого 2009 проекта и должен никогда быть используется без предоставления стандартных свойств. Помимо ошибок, сбоев и неполных (в частности, реализации Mozilla), они в конечном итоге будут отброшены в пользу стандартных свойств.

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; 
}

Обратите внимание, что я устранил все свои уникальные свойства сгибают для элементов гибких, используя оправдаю-контент вместо этого. Следует также отметить, что использование свойств отображения таблицы/таблицы-ячейки вместо Flexbox будет намного более эффективным и иметь лучшую поддержку браузера.

#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; 
}

источник

2014-02-03 19:53:24 cimmanon

Прошу прощения, потребовалось так много времени, чтобы проверить это, но я ценю решение. Я должен признать, что учебник, который я изучал, был старым, но я все еще находил документацию об этом, поэтому я думал, что он все еще используется. Но ваше решение было намного лучше, и после дополнительных исследований атрибута отображения я думаю, что мой макет страницы будет намного проще. [IMG] http://i74.photobucket.com/albums/i277/rdjromans116/Archive/ChromeFixed_zpse97b6a1b.jpg [/ IMG] [/ URL] –

Проблема с Flexbox между chrome и firefox

ответ

Смежные вопросы