问题
I am working on a website with a navigation bar using a simple unordered list. The CSS values for each of these HTML elements are measured in px. I have been using Inspect Element in Google Chrome to measure the upper padding of the ul tag that centres the list and the padding of the a tag so that the link is the same height as the navigation bar.
When I view the page on a laptop/desktop with a largish screen, everything looks good. The light grey "selected link" background lines up perfectly with the darker grey of the nav bar:
However when I view the same page on any mobile device (I've tested it on iPhone 6+, iPhone 5, & iPad 2) the padding of the selected link is slightly off:
If I slightly adjust the CSS attributes of the link & unordered list padding, I can make the light grey background line up perfectly on mobile devices, but then it is off on desktop/laptop devices!
I have done some research into how the px measurement works, and understand that it doesn't correspond to exactly one pixel onscreen, that instead it corresponds to some sort of "CSS pixel" that can change in size depending on browser zoom and pixel density and some other factors. This would make sense to me if the navigation bar appeared smaller in real terms on mobile devices, but the fact that the elements are actually changing position baffles me. If anyone has some clarifying information on what is going on here, and what I can do to make the menu bar elements line up properly on both desktop and mobile, I would greatly appreciate it.
CLARIFICATION EDIT: I have switched the unit of measure to em for the nav-bar and still have the same misalignment issue. My understanding is that on the same device, all else (browser zoom etc.) being equal, px (or pt etc.) has a fixed length. So for the sake of argument, let's say that 10px = 2cm on a particular desktop, D, and 10px = 1cm on a particular mobile device, M, all else being equal. So there exists a real-world scaling factor of 2x from M to D. Now, with the fixed set of CSS properties I have assigned to each element in the nav-bar, the "selected link" background and each list item (BLOG etc.) (and all their padding) perfectly line up using D. So when M renders the nav-bar it should arrive at a nav-bar that is 2x smaller than that rendered by D. Despite M being smaller in real terms, the height of the nav-bar in px is still equal to the height of the list items and their associated padding in px. What instead happens is that somewhere in the rendering process, M decides that the nav-bar's height is actually just slightly less than the height of the list items and their associated padding. I'm struggling to understand why this happens. In other words, even if the px is a different size on two different devices, the relation between two quantities measured in px should still be the same.
Code for the navigation bar is below.
<body id="blog">
<div id="wrapper">
<div id="header">
<div id="nav-menu">
<ul id="nav">
<li class="nav"><a id="nav-blog" href="/blog" class="nav">BLOG</a></li>
<li class="nav"><a id="nav-projects" href="/projects" class="nav">PROJECTS</a></li>
<li class="nav"><a id="nav-about" href="/about" class="nav">ABOUT</a></li>
<li class="nav"><a id="nav-contact" href="/contact" class="nav">CONTACT</a></li>
<li class="nav"><a href="/rss" class="nav">RSS</a></li>
</ul>
</div>
With the following CSS code:
div#header {
position: fixed;
height: 60px;
width: 100%;
margin: 0 auto;
background: #57606A;
opacity: 0.85;
}
ul#nav {
font-size: 0;
list-style-type: none;
text-align: left;
margin: 0;
padding-top: 19px;
}
li.nav {
font-size: 19px;
font-family: "Helvetica", sans-serif;
font-weight: lighter;
display: inline;
}
a:link.nav {
color: #dddddd;
text-decoration: none;
transition: 0.25s;
padding: 19px 12px;
}
/* Ensures that the current page is highlighted in nav */
body#blog a#nav-blog,
body#about a#nav-about,
body#projects a#nav-projects,
body#contact a#nav-contact {
color: #aaccaa;
background: #798088;
}
回答1:
Take a look at A pixel is not a pixel is not a pixel.
A cleaner solution to what you're trying to accomplish may be just to set padding on your li elements (see the jsfiddle):
ul {
background: gray;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 10px; /* the relevant part */
}
.selected {
background: #eee;
}
This way, we say the ul is "agnostic" about the height of its children. The ul doesn't care about what its height is supposed to be, or whether the child li elements are centered vertically, horizontally, etc. Instead, the li elements care about their padding, which in turn makes them appear to have the correct height, centering, etc.
As a side note, you can also consider using em or rem, as em calculates the unit size based on parent elements unit sizes, and rem calculates sizes based on the global text-size of the document.
回答2:
Because the computer and the iOS device have different screen sizes.
The iOS device's screen is considerably smaller than on the computer, but you hardcoded the pixel size of the text, no matter how big the screen size is.
The best thing to do, for cross-device and cross-browser compatibility, is to use the em unit, which is a relative unit to the screen size. So change px to em and change the number accordingly, and the em will scale down to its relative size on the iOS device.
来源：https://stackoverflow.com/questions/32173068/why-do-html-elements-with-css-sizes-measured-in-pixels-appear-slightly-larger-on