#html #css #image #internet-explorer #firefox
#HTML #css #изображение #internet-explorer #firefox
Вопрос:
Я пытаюсь центрировать содержимое .onesizechart по вертикали, которое у меня работает как в Chrome, так и в Safari, но не работает ни в Firefox, ни в IE. В Chrome и Safari содержимое отображается так при наведении курсора мыши, но в Firefox и IE содержимое отображается так при наведении курсора мыши. Живой сайт здесь не совсем уверен, что является причиной этого.
HTML / Liquid
<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.title | escape }}" />
</a>
{% assign contains_os = false %}
{% for variant in product.variants %}
{% if variant.title contains 'OS' %}
{% assign contains_os = true %}
{% endif %}
{% endfor %}
{% if contains_os %}
<div class="onesizechart">
{% for variant in product.variants %}
{% if variant.inventory_quantity == 0 %}
<img src="{{ 'onesize-triangle-outofstock.png' | asset_url }}"/>
{% else %}
<img src="{{ 'onesize-triangle.png' | asset_url }}"/>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="homepage-sizechart">
<div class="sizes">
{{ 'size-triangle.png' | asset_url | img_tag }}
{% for variant in product.variants %}
<span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %} {% if variant.title contains 'OS'%}hide{% endif %}">{{ variant.title }}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
CSS
.homepage-products {
cursor: pointer;
margin-top: 20px;
}
.onesizechart {
opacity: 0;
position: absolute;
display: table;
width: 90%;
z-index: 999;
top: 5%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}
.homepage-sizechart {
bottom: 0;
display: table-cell;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 5%;
vertical-align: middle;
width: 90%;
z-index: 999;
}
.sizes {
position: relative;
}
Ответ №1:
Попробуйте изменить это display: inline-block; top: 30%;
.onesizechart {
opacity: 0;
position: absolute;
display: inline-block;
width: 90%;
z-index: 999;
top: 30%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}