CODEWITHSUNDEEP
htmlcsshyperlinkcross-browser
coder
coder

Reputation: 301

Are there any differences in browser support for <a> link ellement using display: block;

I was wondering if there are any differences between the following 3 buttons. And if there are any, how do browsers handle them, including which area is exactly clickable?

On a website I made, I removed all link buttons like the "my-button-1" example and added the class to the A element it self, as with the "my-button-2" example. Using display block. After that I saw a drop in page-views/clicks etc..

Is there any differences for older browsers, when using a link element with display block?

<a href="http://example.com">
    <div class="my-button-1">
        Click here
    </div>
</a>

<a href="http://example.com" class="my-button-2">
    Click here
</a>

<div class="my-button">
    <a href="http://example.com">
        Click here
    </a>
</div>

.my-button-1 {
    background-color: yellow;
    height: 50px;
    width: 200px;
}

a.my-button-2 {
    display: block;
    background-color: yellow;
    height: 50px;
    width: 200px;
}

.my-button-3 a {
    display: block;
    background-color: yellow;
    height: 50px;
    width: 200px;
}

Upvotes: 0

Views: 30

Answers (1)

mleleigh
mleleigh

Reputation: 125

There should be no difference in older browsers. The display property and block value are and have been fully supported.

In this case, you don't need the inner div and can apply the CSS directly to the a like your 2nd example.

Upvotes: 1

Related Questions