Question

我的网页有以下代码，当我在Chrome中使用它时，一切都很好，但是当我在Firefox中使用它时，样式会发生变化。我需要让Firefox风格与Chrome风格相同，那么有什么建议吗？我在下面的代码中提到了我试图做的事情。

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

最好的问候。

Answer 1

您不需要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;
}

Firefox：中心弹性框

1 个答案: