Question

单击标签时，IE11无法触发复选框。我玩了一些CSS指针 - 事件没有成功。

<button type="button">
<label for="mastercard">
<div><svg xmlns="http://www.w3.org/2000/svg" style="height: 25px;" viewBox="0 0 11.0536 8.6" width="41.777" height="32.504"><path fill="#231f20" d="M 10.828 8.483 v 0.023 h 0.02 a 0.022 0.022 0 0 0 0.012 -0.003 a 0.01 0.01 0 0 0 0.004 -0.009 a 0.01 0.01 0 0 0 -0.004 -0.008 a 0.02 0.02 0 0 0 -0.012 -0.003 Z m 0.02 -0.015 c 0.011 0 0.02 0.002 0.025 0.007 a 0.024 0.024 0 0 1 0.009 0.02 a 0.022 0.022 0 0 1 -0.007 0.017 a 0.034 0.034 0 0 1 -0.02 0.008 l 0.028 0.031 h -0.022 l -0.025 -0.03 h -0.008 v 0.03 h -0.018 v -0.083 Z m -0.005 0.112 c 0.01 0 0.019 -0.002 0.027 -0.005 a 0.071 0.071 0 0 0 0.037 -0.038 a 0.072 0.072 0 0 0 -0.015 -0.077 a 0.07 0.07 0 0 0 -0.05 -0.02 c -0.009 0 -0.018 0.002 -0.026 0.005 a 0.068 0.068 0 0 0 -0.037 0.037 a 0.068 0.068 0 0 0 -0.006 0.028 c 0 0.01 0.001 0.019 0.005 0.027 a 0.066 0.066 0 0 0 0.038 0.038 a 0.069 0.069 0 0 0 0.027 0.005 m 0 -0.16 a 0.09 0.09 0 0 1 0.065 0.026 a 0.088 0.088 0 0 1 0.02 0.099 a 0.093 0.093 0 0 1 -0.05 0.048 a 0.092 0.092 0 0 1 -0.128 -0.083 c 0 -0.013 0.003 -0.024 0.008 -0.035 a 0.088 0.088 0 0 1 0.049 -0.048 a 0.092 0.092 0 0 1 0.036 -0.007 M 2.38 8.098 c 0 -0.16 0.104 -0.291 0.275 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.17 0 -0.275 -0.131 -0.275 -0.29 m 0.734 0 v -0.454 h -0.197 v 0.11 a 0.344 0.344 0 0 0 -0.286 -0.133 c -0.255 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.286 -0.133 v 0.11 h 0.197 Z m 6.666 0 c 0 -0.16 0.105 -0.291 0.276 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.171 0 -0.276 -0.131 -0.276 -0.29 m 0.735 0 V 7.28 h -0.197 v 0.474 a 0.344 0.344 0 0 0 -0.287 -0.133 c -0.254 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.287 -0.133 v 0.11 h 0.197 Z m -4.952 -0.3 c 0.127 0 0.209 0.08 0.23 0.22 H 5.32 c 0.02 -0.131 0.1 -0.22 0.241 -0.22 m 0.004 -0.177 c -0.266 0 -0.452 0.194 -0.452 0.477 c 0 0.288 0.194 0.476 0.465 0.476 a 0.551 0.551 0 0 0 0.372 -0.127 L 5.854 8.3 a 0.434 0.434 0 0 1 -0.264 0.095 c -0.127 0 -0.242 -0.06 -0.27 -0.223 h 0.673 a 0.936 0.936 0 0 0 0.004 -0.075 c -0.002 -0.283 -0.177 -0.477 -0.431 -0.477 m 2.382 0.477 c 0 -0.16 0.104 -0.291 0.275 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.17 0 -0.275 -0.131 -0.275 -0.29 m 0.734 0 v -0.454 h -0.197 v 0.11 a 0.344 0.344 0 0 0 -0.286 -0.133 c -0.255 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.286 -0.133 v 0.11 h 0.197 Z m -1.848 0 c 0 0.275 0.191 0.476 0.484 0.476 c 0.136 0 0.227 -0.03 0.326 -0.108 l -0.095 -0.16 a 0.399 0.399 0 0 1 -0.237 0.082 c -0.158 -0.002 -0.273 -0.116 -0.273 -0.29 c 0 -0.175 0.115 -0.289 0.273 -0.291 c 0.086 0 0.163 0.029 0.237 0.082 l 0.095 -0.16 a 0.475 0.475 0 0 0 -0.326 -0.108 c -0.293 0 -0.484 0.201 -0.484 0.477 m 2.543 -0.477 a 0.268 0.268 0 0 0 -0.24 0.133 v -0.11 h -0.195 v 0.907 h 0.198 v -0.508 c 0 -0.15 0.064 -0.234 0.193 -0.234 a 0.32 0.32 0 0 1 0.124 0.023 l 0.06 -0.186 a 0.42 0.42 0 0 0 -0.14 -0.025 m -5.288 0.095 a 0.679 0.679 0 0 0 -0.37 -0.095 c -0.23 0 -0.378 0.11 -0.378 0.29 c 0 0.148 0.11 0.24 0.313 0.268 l 0.094 0.013 c 0.108 0.016 0.159 0.044 0.159 0.095 c 0 0.07 -0.072 0.11 -0.207 0.11 a 0.483 0.483 0 0 1 -0.302 -0.094 l -0.093 0.153 c 0.108 0.08 0.245 0.118 0.393 0.118 c 0.262 0 0.414 -0.123 0.414 -0.296 c 0 -0.16 -0.12 -0.243 -0.317 -0.272 l -0.093 -0.013 c -0.085 -0.011 -0.154 -0.028 -0.154 -0.09 c 0 -0.066 0.065 -0.105 0.173 -0.105 c 0.116 0 0.228 0.043 0.283 0.077 Z m 2.545 -0.095 a 0.267 0.267 0 0 0 -0.239 0.133 v -0.11 H 6.2 v 0.907 h 0.197 v -0.508 c 0 -0.15 0.065 -0.234 0.194 -0.234 a 0.32 0.32 0 0 1 0.123 0.023 l 0.06 -0.186 a 0.42 0.42 0 0 0 -0.14 -0.025 m -1.683 0.023 h -0.323 v -0.275 h -0.2 v 0.275 h -0.183 v 0.18 h 0.184 v 0.414 c 0 0.21 0.082 0.336 0.315 0.336 a 0.463 0.463 0 0 0 0.247 -0.07 l -0.057 -0.17 a 0.365 0.365 0 0 1 -0.175 0.052 c -0.099 0 -0.13 -0.06 -0.13 -0.152 v -0.41 h 0.322 Z M 2 8.55 v -0.57 c 0 -0.214 -0.136 -0.358 -0.357 -0.36 a 0.351 0.351 0 0 0 -0.319 0.161 a 0.333 0.333 0 0 0 -0.3 -0.16 a 0.3 0.3 0 0 0 -0.265 0.134 v -0.112 H 0.562 v 0.907 h 0.2 v -0.503 c 0 -0.157 0.087 -0.241 0.222 -0.241 c 0.13 0 0.197 0.085 0.197 0.24 v 0.504 h 0.2 v -0.503 c 0 -0.157 0.09 -0.241 0.222 -0.241 c 0.134 0 0.199 0.085 0.199 0.24 v 0.504 Z" /><path fill="#f79410" d="M 10.95 5.534 v -0.133 h -0.035 l -0.04 0.091 l -0.04 -0.09 H 10.8 v 0.132 h 0.025 v -0.1 l 0.037 0.086 h 0.026 l 0.037 -0.086 v 0.1 Z m -0.22 0 v -0.11 h 0.044 v -0.022 h -0.113 v 0.022 h 0.045 v 0.11 Z" /><path fill="#ff5f00" d="M 7.021 6.104 h -2.99 V 0.731 h 2.99 Z" /><path fill="#eb001b" d="M 4.223 3.417 c 0 -1.09 0.51 -2.06 1.305 -2.686 a 3.417 3.417 0 1 0 0 5.373 a 3.411 3.411 0 0 1 -1.305 -2.687" /><path fill="#f79e1b" d="M 11.054 3.417 a 3.417 3.417 0 0 1 -5.529 2.687 A 3.41 3.41 0 0 0 6.83 3.417 c 0 -1.09 -0.51 -2.06 -1.305 -2.686 a 3.417 3.417 0 0 1 5.529 2.686" /></svg></div>
<input name="paymenttype" class="required" id="mastercard" required="required" type="radio" value="mastercard">
<span>Mastercard</span>
</label>
</button>

https://codepen.io/anon/pen/dJBZzq

Answer 1

删除包装按钮和样式类“按钮”，它看起来像按钮。这样的事情。

<style>
.button{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;

color: #333;
background-color: #fff;
border-color: #ccc;
}
</style>

<div class="button">
	<div><svg xmlns="http://www.w3.org/2000/svg" style="height: 25px;" viewBox="0 0 11.0536 8.6" width="41.777" height="32.504"><path fill="#231f20" d="M 10.828 8.483 v 0.023 h 0.02 a 0.022 0.022 0 0 0 0.012 -0.003 a 0.01 0.01 0 0 0 0.004 -0.009 a 0.01 0.01 0 0 0 -0.004 -0.008 a 0.02 0.02 0 0 0 -0.012 -0.003 Z m 0.02 -0.015 c 0.011 0 0.02 0.002 0.025 0.007 a 0.024 0.024 0 0 1 0.009 0.02 a 0.022 0.022 0 0 1 -0.007 0.017 a 0.034 0.034 0 0 1 -0.02 0.008 l 0.028 0.031 h -0.022 l -0.025 -0.03 h -0.008 v 0.03 h -0.018 v -0.083 Z m -0.005 0.112 c 0.01 0 0.019 -0.002 0.027 -0.005 a 0.071 0.071 0 0 0 0.037 -0.038 a 0.072 0.072 0 0 0 -0.015 -0.077 a 0.07 0.07 0 0 0 -0.05 -0.02 c -0.009 0 -0.018 0.002 -0.026 0.005 a 0.068 0.068 0 0 0 -0.037 0.037 a 0.068 0.068 0 0 0 -0.006 0.028 c 0 0.01 0.001 0.019 0.005 0.027 a 0.066 0.066 0 0 0 0.038 0.038 a 0.069 0.069 0 0 0 0.027 0.005 m 0 -0.16 a 0.09 0.09 0 0 1 0.065 0.026 a 0.088 0.088 0 0 1 0.02 0.099 a 0.093 0.093 0 0 1 -0.05 0.048 a 0.092 0.092 0 0 1 -0.128 -0.083 c 0 -0.013 0.003 -0.024 0.008 -0.035 a 0.088 0.088 0 0 1 0.049 -0.048 a 0.092 0.092 0 0 1 0.036 -0.007 M 2.38 8.098 c 0 -0.16 0.104 -0.291 0.275 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.17 0 -0.275 -0.131 -0.275 -0.29 m 0.734 0 v -0.454 h -0.197 v 0.11 a 0.344 0.344 0 0 0 -0.286 -0.133 c -0.255 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.286 -0.133 v 0.11 h 0.197 Z m 6.666 0 c 0 -0.16 0.105 -0.291 0.276 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.171 0 -0.276 -0.131 -0.276 -0.29 m 0.735 0 V 7.28 h -0.197 v 0.474 a 0.344 0.344 0 0 0 -0.287 -0.133 c -0.254 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.287 -0.133 v 0.11 h 0.197 Z m -4.952 -0.3 c 0.127 0 0.209 0.08 0.23 0.22 H 5.32 c 0.02 -0.131 0.1 -0.22 0.241 -0.22 m 0.004 -0.177 c -0.266 0 -0.452 0.194 -0.452 0.477 c 0 0.288 0.194 0.476 0.465 0.476 a 0.551 0.551 0 0 0 0.372 -0.127 L 5.854 8.3 a 0.434 0.434 0 0 1 -0.264 0.095 c -0.127 0 -0.242 -0.06 -0.27 -0.223 h 0.673 a 0.936 0.936 0 0 0 0.004 -0.075 c -0.002 -0.283 -0.177 -0.477 -0.431 -0.477 m 2.382 0.477 c 0 -0.16 0.104 -0.291 0.275 -0.291 c 0.163 0 0.273 0.125 0.273 0.29 c 0 0.166 -0.11 0.291 -0.273 0.291 c -0.17 0 -0.275 -0.131 -0.275 -0.29 m 0.734 0 v -0.454 h -0.197 v 0.11 a 0.344 0.344 0 0 0 -0.286 -0.133 c -0.255 0 -0.454 0.2 -0.454 0.477 c 0 0.277 0.2 0.476 0.454 0.476 a 0.344 0.344 0 0 0 0.286 -0.133 v 0.11 h 0.197 Z m -1.848 0 c 0 0.275 0.191 0.476 0.484 0.476 c 0.136 0 0.227 -0.03 0.326 -0.108 l -0.095 -0.16 a 0.399 0.399 0 0 1 -0.237 0.082 c -0.158 -0.002 -0.273 -0.116 -0.273 -0.29 c 0 -0.175 0.115 -0.289 0.273 -0.291 c 0.086 0 0.163 0.029 0.237 0.082 l 0.095 -0.16 a 0.475 0.475 0 0 0 -0.326 -0.108 c -0.293 0 -0.484 0.201 -0.484 0.477 m 2.543 -0.477 a 0.268 0.268 0 0 0 -0.24 0.133 v -0.11 h -0.195 v 0.907 h 0.198 v -0.508 c 0 -0.15 0.064 -0.234 0.193 -0.234 a 0.32 0.32 0 0 1 0.124 0.023 l 0.06 -0.186 a 0.42 0.42 0 0 0 -0.14 -0.025 m -5.288 0.095 a 0.679 0.679 0 0 0 -0.37 -0.095 c -0.23 0 -0.378 0.11 -0.378 0.29 c 0 0.148 0.11 0.24 0.313 0.268 l 0.094 0.013 c 0.108 0.016 0.159 0.044 0.159 0.095 c 0 0.07 -0.072 0.11 -0.207 0.11 a 0.483 0.483 0 0 1 -0.302 -0.094 l -0.093 0.153 c 0.108 0.08 0.245 0.118 0.393 0.118 c 0.262 0 0.414 -0.123 0.414 -0.296 c 0 -0.16 -0.12 -0.243 -0.317 -0.272 l -0.093 -0.013 c -0.085 -0.011 -0.154 -0.028 -0.154 -0.09 c 0 -0.066 0.065 -0.105 0.173 -0.105 c 0.116 0 0.228 0.043 0.283 0.077 Z m 2.545 -0.095 a 0.267 0.267 0 0 0 -0.239 0.133 v -0.11 H 6.2 v 0.907 h 0.197 v -0.508 c 0 -0.15 0.065 -0.234 0.194 -0.234 a 0.32 0.32 0 0 1 0.123 0.023 l 0.06 -0.186 a 0.42 0.42 0 0 0 -0.14 -0.025 m -1.683 0.023 h -0.323 v -0.275 h -0.2 v 0.275 h -0.183 v 0.18 h 0.184 v 0.414 c 0 0.21 0.082 0.336 0.315 0.336 a 0.463 0.463 0 0 0 0.247 -0.07 l -0.057 -0.17 a 0.365 0.365 0 0 1 -0.175 0.052 c -0.099 0 -0.13 -0.06 -0.13 -0.152 v -0.41 h 0.322 Z M 2 8.55 v -0.57 c 0 -0.214 -0.136 -0.358 -0.357 -0.36 a 0.351 0.351 0 0 0 -0.319 0.161 a 0.333 0.333 0 0 0 -0.3 -0.16 a 0.3 0.3 0 0 0 -0.265 0.134 v -0.112 H 0.562 v 0.907 h 0.2 v -0.503 c 0 -0.157 0.087 -0.241 0.222 -0.241 c 0.13 0 0.197 0.085 0.197 0.24 v 0.504 h 0.2 v -0.503 c 0 -0.157 0.09 -0.241 0.222 -0.241 c 0.134 0 0.199 0.085 0.199 0.24 v 0.504 Z" /><path fill="#f79410" d="M 10.95 5.534 v -0.133 h -0.035 l -0.04 0.091 l -0.04 -0.09 H 10.8 v 0.132 h 0.025 v -0.1 l 0.037 0.086 h 0.026 l 0.037 -0.086 v 0.1 Z m -0.22 0 v -0.11 h 0.044 v -0.022 h -0.113 v 0.022 h 0.045 v 0.11 Z" /><path fill="#ff5f00" d="M 7.021 6.104 h -2.99 V 0.731 h 2.99 Z" /><path fill="#eb001b" d="M 4.223 3.417 c 0 -1.09 0.51 -2.06 1.305 -2.686 a 3.417 3.417 0 1 0 0 5.373 a 3.411 3.411 0 0 1 -1.305 -2.687" /><path fill="#f79e1b" d="M 11.054 3.417 a 3.417 3.417 0 0 1 -5.529 2.687 A 3.41 3.41 0 0 0 6.83 3.417 c 0 -1.09 -0.51 -2.06 -1.305 -2.686 a 3.417 3.417 0 0 1 5.529 2.686" /></svg></div>
	<input name="mastercard" class="required" id="mastercard" required="required" type="radio" value="mastercard" />
	<label for="mastercard">MasterCard</label>

IE11触发标签内部按钮

1 个答案: