2013-11-26 2 views
0

У меня есть следующий код для моей веб-страницы, и когда я использую его в Chrome, все прекрасно, но когда я использую его в Firefox, стиль меняется. Мне нужно сделать стиль Firefox таким же, как стиль Chrome, поэтому любое предложение для этого? Я упоминаю в коде ниже, что я пытался сделать.Firefox: center flex box

<html> 
<head> 
<style> 
div 
{ 
    background-color: #FFFFFF; 
    border: 1px solid #86B3E6; 
    color: 2F62AC; 
    display: block; 
    font-size: 17px; 
    font-weight: bold; 
    margin: 10px; 
    padding: 5px 5px; 
    text-decoration: none; 
    direction:rtl; 
    border-radius: 8px; 
} 
a 
{ 
    background-color: #FFFFFF; 
    color: 2F62AC; 
    font-size: 17px; 
    font-weight: bold; 
    text-decoration: none; 
    direction:rtl; 
    position: relative; 
    border-radius: 8px; 
    border: none; 
    padding: 12px 10px; 
    text-align: center; 
} 
a.option1 
{ 
    //Not centered but filled all area 
    display: flex; 
    display: -webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
} 
a.option2 
{ 
    //Not centered and not filled all area 
    display: -webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    display: -moz-box; 
    -moz-box-pack: center; 
    -moz-box-align: center; */ 
} 
a:active, a:hover { 
    background-color: #2F62AC; 
    color: #FFFFFF; 
} 
</style> 
</head> 
<body> 
<div><a class="option1" href="#">Option 1</a></div> 
<div><a class="option2" href="#">Option 2</a></div> 
</body> 
</html> 

С уважением.

+0

Я думаю, что вы хотели, чтобы пометить это с Flexbox; который для «вещи CSS». Flex используется для интерфейса Adobe/Apache. – JeffryHouser

+0

Не могли бы вы дать другое описание того, что именно, проблема и что вы пытаетесь выполнить? Это не ясно из ваших комментариев css. – jbenjohnson

ответ

0

Вам не нужно Flexbox для этой цели: просто display: block на якорь:

http://cssdeck.com/labs/ocotcmpf

div 
{ 
    background-color: #FFFFFF; 
    border: 1px solid #86B3E6; 
    color: 2F62AC; 
    display: block; 
    font-size: 17px; 
    font-weight: bold; 
    margin: 10px; 
    padding: 5px 5px; 
    text-decoration: none; 
    direction:rtl; 
    border-radius: 8px; 
} 
a 
{ 
    background-color: #FFFFFF; 
    color: 2F62AC; 
    font-size: 17px; 
    font-weight: bold; 
    text-decoration: none; 
    direction:rtl; 
    position: relative; 
    border-radius: 8px; 
    border: none; 
    padding: 12px 10px; 
    text-align: center; 
    display: block; /* here */ 
} 
a:active, a:hover { 
    background-color: #2F62AC; 
    color: #FFFFFF; 
} 
+0

Большое спасибо. – Gharib