Кнопка гиперссылки CSS не работает в Android Firefox? - PullRequest
Новая
       7

Кнопка гиперссылки CSS не работает в Android Firefox?

0 голосов
/ 17 января 2019

У меня есть кнопка CSS, сгенерированная на http://www.hyperlinkcode.com/button-generator/

Код работает на настольных компьютерах Chrome и Firefox. И на мобильном (Android) Chrome, но не на Android Firefox. Он просто ничего не делает.

Вот моя страница примера (откройте ее с помощью Firefox на вашем Android):

https://dokumente -online.com / test200.html 

<html>
<head>
<style type="text/css">
.testbutton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
height:50px;
    line-height:50px;
width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
}.testbutton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.testbutton:active {
    position:relative;
    top:1px;
}
</style>
</head>
<body>
   <br>
   <a class="testbutton" style="margin:20px;padding:10px;width:200px" href="http://orf.at">Button</a>

  </body>
</html>

Есть идеи, что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 17 января 2019

случилось со мной тоже. Удалить позицию: относительная; Firefox mobile по какой-то причине этого не поддерживает. 

<html>
    <head>
    <style type="text/css">
    .testbutton {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color:#ededed;
        -webkit-border-top-left-radius:6px;
        -moz-border-radius-topleft:6px;
        border-top-left-radius:6px;
        -webkit-border-top-right-radius:6px;
        -moz-border-radius-topright:6px;
        border-top-right-radius:6px;
        -webkit-border-bottom-right-radius:6px;
        -moz-border-radius-bottomright:6px;
        border-bottom-right-radius:6px;
        -webkit-border-bottom-left-radius:6px;
        -moz-border-radius-bottomleft:6px;
        border-bottom-left-radius:6px;
    text-indent:0;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#777777;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        font-style:normal;
    height:50px;
        line-height:50px;
    width:100px;
        text-decoration:none;
        text-align:center;
        text-shadow:1px 1px 0px #ffffff;
    }.testbutton:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
        background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
        background-color:#dfdfdf;
    }.testbutton:active {
        top:1px;
    }
    </style>
    </head>
    <body>
       <br>
       <a class="testbutton" style="margin:20px;padding:10px;width:200px" href="http://orf.at">Button</a>

      </body>
    </html>
0 голосов
/ 17 января 2019

Я решил проблему, похоже, что testbutton.active {} не понравился firefox, удалив позицию: относительная; заставит кнопку снова работать.

Кажется, генератор кнопки css не обновлен ...

...