Question

朋友们，请你帮我解决这个小问题。我正在使用opencart，我的产品要求买家在添加购物车之前选择颜色。

通常我们使用带有href的LI来制作带有onclick select color的颜色boxex但是由于Opencart只允许表单元素用于这样的要求，即选择，检查，无线电等，因此我使用带有CSS的单选按钮。它适用于Mozilla，Chrome甚至IE9 ....但不适用于IE8＆amp; IE7 :(

这是编译后的单选按钮的HTML

<div class="option Color" id="option-227">
<span class="required">*</span>
<h2>Color:</h2><br>

<div class="colorOption-Holder">
<input type="radio" id="option-value-18" value="18" name="option[227]">
<label for="option-value-18">
<img src="../images/Swatches/Green-25x25.gif" alt="Green" title="Green">
</label>
</div>

<div class="colorOption-Holder">
<input type="radio" id="option-value-18" value="18" name="option[227]">
<label for="option-value-18">
<img src="../images/Swatches/Blue-25x25.gif" alt="Blue" title="Blue">
</label>
</div>

</div>

这是CSS

.product-info .Color .colorOption-Holder {
float:left;
width:35px;
height:35px;
margin-right:7px;
margin-bottom:9px;
position:relative;
}
.product-info .Color input{
position:absolute;
left:5px;
top:10px;
visibility:hidden;
z-index:5;
}

.product-info .Color input + label {
position:absolute;
left:0;
top:0;

border:1px solid #fff;
}

.product-info .Color input:checked + label {
position:absolute;
left:0;
top:0;
z-index:5;
border:1px solid #f76a02;
}

任何想法如何解决这个问题？这将是一个很大的帮助...谢谢

Answer 1

Internet Explorer 8（和以前的版本）不支持许多CSS选择器。：checked伪类就是其中之一。

检查this similar post以获取名为Selectivizr的解决方案，该解决方案允许您为不同的IE版本添加选择器支持。

如果您不遵守“常规”选项，请检查quirks-mode浏览器对不同选择器的支持。

Answer 2

结束标签是代码，但我不知道为什么他们没有在这里显示这是product / product.tpl文件中的代码

<?php foreach ($option['option_value'] as $option_value) { ?>
<div class="colorOption-Holder">
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo  $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
<img src="<?php echo $option_value['image']; ?>" />
 <?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>

IE的Radio Button CSS问题

2 个答案: