Browser zoom in changes my li width - css

Question

When I zoom in from 100% to 90% or less, my li width changes from 229px to a larger value. Does anyone knows how to avoid.
It happens with Chrome and Firefox. IE9 - IE11 are fine
Your help or suggestion is appreciated.
<div class="product_section">
<ul class="list_product">
<li>
<a href="#">
<div class="product_frame" style="background-image: url(http://image.haier.com/pk/nv/consumer/refrigerator/tfnf/201208/P020121130740687231395.png);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
</ul>
</div>
.product_section {
display: inline-block;
margin: 15px;
width: 725px;
}
.product_frame {
display: inline-block;
margin: 0;
padding: 0;
width: 229px;
height: 229px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.product_name {
display: table;
vertical-align: middle;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
}
.product_name p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 10px;
}
ul.list_product {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
ul.list_product li {
display: inline-block;
margin: 8px;
width: 229px;
height: 329px;
float: left;
border: 1px solid #eeeeee;
border-radius: 5px;
position: relative;
}
ul.list_product li:nth-child(3n - 2) {
margin-left: 0;
}
ul.list_product li:nth-child(3n) {
margin-right: 0;
}
https://jsfiddle.net/pocnjpf9/1/
/ UPDATE /
After finished reading a previous post: Zoom changes the design layout
I have noticed that it's most likely caused by the border.
By applying box-sizing: border-box to the li fixes the problem.

Answer 1

Adding the following code of CSS will solve your problem.
*, *:before, *:after {
box-sizing: border-box;
}
Demo: https://jsfiddle.net/pocnjpf9/2/