0
Когда я увеличиваю масштаб с 100% до 90% или меньше, моя ширина меняется с 229 пикселей на большее значение. Кто-нибудь знает, как этого избежать.Браузер меняет мою ширину
Это происходит с Chrome и Firefox. IE9 - IE11 в порядке
Ваша помощь или предложение оценены.
<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 /
После дочитал предыдущий пост: Zoom changes the design layout я заметил, что это скорее всего вызвано границы.
Применяя размер коробки: рамка к ли фиксирует проблему.
Можете ли вы представить образ того, что вы хотите достичь? Ваш код jsfiddle кажется беспорядочным. –
Когда вы проверите мой jsfiddle с 100% -ным увеличением, вы увидите 3 ли на одну строку с еще тремя ликами во второй строке. Если вы увеличите масштаб до 90%, 3-я ливка упадет во вторую строку (если вы используете Chrome или Firefox). Я хочу сохранить макет, не подвергая его масштабированию. Я не очищал свой css coz. Я не уверен, вызван ли он другими настройками. Спасибо –