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-align: center; width: 60px; -webkit-appearance: button; -moz-appearance:button; border-radius: 10px; font-size: x-large; font-kerning: auto } </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-align: center; width: 60px; -moz-appearance: button; -webkit-appearance: button; font-size: x-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>
|
width: 60px; -moz-appearance: button; -webkit-appearance: button; 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 /