Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Style Width and webkit-appearance does not work with Firefox and Edge

16.07.2018 (👁4567)

Style Width does not work with Firefox and Edge

 

Task:

show a hyperlink as a button.

For this you can use the Style property: webkit-appearance and specify the width with style width: 60 px

 

Problem:

the Style setting: Width for hyperlinks does not work for Firefox and Edge Browser.

The solution seems to be to put the a-href elements in a div element. Then work at least Chrome, Opera, Firefox. But not Microsoft Edge.

 

# CSS Style, Html, webkit

 

Does not work with all browsers.

<style>

    .NextLink {

        text-aligncenter;

        width60px;

        -webkit-appearancebutton;

        -moz-appearance:button;

        border-radius10px;

        font-sizex-large;

        font-kerningauto

    }

</style>

 

 

Fixed: In the following illustration, the version works by using a link within a Div-Html element.

Direct setting of width and appearance does not work for all browsers.

<style>

    .NextLink {

        /*background-color: #D0D0D0;

        border: none;*/

        text-aligncenter;

        width60px;

        -moz-appearancebutton;

        -webkit-appearancebutton;

        font-sizex-large;

    }

</style>

<div id="divNext" style="position:absolute;right:100px;">

    <a class="NextLink" href="@sIDPrevious">@sCharPrevious</a>

    <a class="NextLink" href="@sIDNext">@sCharNext</a>

</div>

 

<div id="divNext" style="position:absolute;right:0;">

    <div class="NextLink"><a href="@sIDPrevious">@sCharPrevious</a></div>

    <div class="NextLink"><a href="@sIDNext">@sCharNext</a></div>

</div>

 

 

width60px;

-moz-appearancebutton;

-webkit-appearancebutton;

1)

<a class="NextLink">x</a>

2)

<div class="NextLink"><a >x</a></div>

 

 

 

In Google Chrome

-webkit-appearance -> is displayed correctly

 

 

In Opera

-webkit-appearance -> works perfectly

 

 

 

Firefox

-webkit-appearance -> does not work directly on a-href links, but the CSS style application works on outlined div elements

 

 

Microsoft Edge

Not correct

-webkit-appearance -> does not work with either a-links or edged div-block /