CSS <1px gap between styled list menu in Chrome - css

Question

As you'll see in the screenshot linked to below, I'm encountering strange behaviour when using Chrome 39.0.2171.95. A smaller than 1px gap appears between the styled list items. It looks fine in Firefox and IE.
I hadn't noticed it until I started using a device with retina display, so I would be interested to find out how many others see the same as me.
It doesn't use inline-block, and removing the space between each <li> is not possible as the three-tiered menu is generated by WordPress (and I doubt it is a solution here). Using negative margins hides the gap, but as a workaround and not a solution it causes other issues (it moves the sub-menus out of place).
Screenshot: http://i58.tinypic.com/m9rkmf.jpg
Link: http://www.tolkiensociety.org/
This is the current CSS:
#mainmenu {
background:#333333;
position:absolute;
bottom:0;
width:960px;
}
#mainmenu.fixed {
position:fixed;
top:0;
z-index:100;
height:43px;
}
#mainmenu > ul {
padding-left:124px;
}
#mainmenu ul {
height:43px;
list-style:none;
position:relative;
}
#mainmenu ul li {
float:left;
}
#mainmenu ul li a {
display:block;
padding:12px 10px;
border-bottom:4px solid #00A33E;
color:#fefefe;
text-transform:uppercase;
text-decoration:none;
font-size:14px;
font-weight:300;
height:15px;
}
#mainmenu ul li:hover > a {
background:#222222;
}
#mainmenu .menu-item-1128 > a {
border-bottom: 4px solid #82c4e5;
}
#mainmenu .menu-item-644 > a {
border-bottom: 4px solid #e33417;
}
#mainmenu .menu-item-62 > a {
border-bottom: 4px solid #78bf32;
}
#mainmenu .menu-item-91 > a {
border-bottom: 4px solid #00A33E;
}
#mainmenu .menu-item-81 > a {
border-bottom: 4px solid #d99f3c;
}
#mainmenu .menu-item-739 > a {
border-bottom: 4px solid #F1654F;
}
#mainmenu ul ul {
display:none;
position:absolute;
top:39px;
z-index:9999;
min-width:200px;
}
#mainmenu ul li:hover > ul {
display:block;
}
#mainmenu ul ul li {
float:none;
position:relative;
}
#mainmenu ul ul li a {
padding:12px 10px;
border:0;
color:#fefefe;
text-transform:none;
text-decoration:none;
font-size:14px;
font-weight:400;
height:15px;
white-space:nowrap;
background-color:#222;
}
#mainmenu ul ul li a:hover {
background-color:#111;
}
#mainmenu ul ul ul {
position:absolute;
left:100%;
top:0;
}
#mainmenu ul ul li:hover > a {
background:#111;
}
#mainmenu ul ul ul li a {
background-color:#111;
}
#mainmenu ul ul ul li a:hover {
background-color:#000;
}

Answer 1

Resset the UL and LI as shown below to bring the padding and margin of the listed to zero.
ol, ul, li {
margin: 0;
padding: 0;
}
Note: Add the above to the very top of your CSS file. That way, unless if otherwise set, the padding and margin will be zero.

Answer 2

Is your browser zoom at 100%? I recently had a similar case, and I found out the little gap was because the page was slightly zoomed in.