I just can’t help complaining about this, although it doesn’t cause any usability problems. Now look at the picture shown below:
Mismatch between anchor focus and visual element boundary.
I think that’s enough for a web developer to realize what’s the problem and how does it happen, the bounding box of <a> is not of the same size of it’s parent <li>, whose background is actual image of a button that user would like to click.
All I want to do is apply following CSS style to <a>: ‘padding: 0; height: 100%’.
Now it looks better, at least in Chrome 40 and IE 11 on Windows 8.1…
Sometimes, even a single line of CSS may collapse the whole world (not really)~
It’s about a month or two since I found this problem and reported it to Google. But it seems that they are too busy to take a look. Although it’s not a functional problem, I still feel uncomfortable with it. So let’s check out what was that and how to fix it~
First, you should have a web browser … ok, go to https://cloud.google.com/console and sign in with your Google Account if you have one.
Fire ‘Account settings’ from the left sidebar.
See the checkbox of the Email settings? That’s our big star today!
First glance at Account settings page of Google Cloud Console
If you read my Gmail from the picture above, feel free to contact me~
Now it’s a little bit tricky, your attentions please~ Un-maximize your browser or try to adjust it’s height till you see a scrollbar on the right side. Then all you have to do is … yes, scroll down, and tell me if you see the same thing below.
Display Problem of Google Cloud Console Account Settings
Aha, the checkbox alone stay like a ‘position: fixed;’ while the page scrolled down.
Now, if you are using a modern desktop web browser like Chrome, you can right click on that checkbox and ‘Inspect Element’ as you always do.
Inspecting Element on Checkbox
As you can see in the image above, the direct ancestor of <input type=”checkbox” />, the <div class=”checkbox” /> has a ‘position: absolute;’ set.
And my solution is: add a single line ‘position: relative;’ to the parent of that div, see screen shot below.
Shun's Shell 