In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul.
The problem arises when viewing the navigation bar on Mac browsers. Due to slight variations in how each browser renders fonts, the overall width may either increase or decrease, causing the last element to wrap onto the next line.
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
This situation raises the question of how to ensure consistent element widths across all browsers by only specifying the font size.