IE8下input[type="radio"]:checked + label:before控制样式,radio,checkbox点击没样式解决办法

朱雀 2021-01-20 06:32 570阅读 0赞

写在前面,因为部分客户用xp的系统,最高支持到IE8,所以开发 的页面要求兼容到IE8,o(╥﹏╥)o

个人是IE11,win7环境不能安装iIE8,找了好久各种不支持,不能用IE8浏览器测试,只能用IE11下F12调试模式仿真IE8

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70

引用的主要js

  1. <script type="text/javascript" src="/framework-web/static/easyui/jquery.min.js"></script>
  2. <!--IE8支持CSS3选择器,只有是IE8浏览器才能识别-->
  3. <!--[if lte IE 8]>
  4. <script type="text/javascript" src="grp/pm/js/budegePmCommon/selectivizr-min.js"></script>
  5. <script type="text/javascript" src="grp/pm/js/budegePmCommon/addIE8.js"></script>
  6. <link rel="stylesheet" href="grp/pm/css/budegePmCommon/addIE8style.css">
  7. <![endif]-->

用到的css代码块

  1. .customRadio input[type="radio"]:checked + label:before{
  2. background: url('../../images/iconBase.png') no-repeat -1px -51px;
  3. }
  4. label.boxradio:before{
  5. background: url('../../images/iconBase.png') no-repeat -1px -51px;
  6. }

主要的html代码块

页面静态的radio

  1. <div class="radioonclick">
  2. <span class="rowleft">是否包含政府采购:</span>
  3. <span class="rowright">
  4. <input type="radio" id="basic_is_contain_stcok1" name="is_contain_stcok" value="1"><label for="basic_is_contain_stcok1"></label>
  5. <input type="radio" id="basic_is_contain_stcok0" name="is_contain_stcok" value="0"><label for="basic_is_contain_stcok0"></label>
  6. </span>
  7. </div>
  8. <div class="radioonclick">
  9. <span class="rowleft">是否包含新增资产:</span>
  10. <span class="rowright">
  11. <input type="radio" id="basic_is_contain_asset1" name="is_contain_asset" value="1"><label for="basic_is_contain_asset1"></label>
  12. <input type="radio" id="basic_is_contain_asset0" name="is_contain_asset" value="0"><label for="basic_is_contain_asset0"></label>
  13. </span>
  14. </div>
  15. 动态的radio代码<div class="radioonclick">
  16. <span class="rowleft">绩效评价类型:</span>
  17. <span id="rowrightradio" class="rowright">//动态拼接容器
  18. <!--<input type="radio" id="basic_per_eval_code1" name="per_eval_code" value="1"><label for="basic_per_eval_code1">单位自评项目</label>-->
  19. <!--<input type="radio" id="basic_per_eval_code2" name="per_eval_code" value="2"><label for="basic_per_eval_code2">部门重点评价项目</label>-->
  20. <!--<input type="radio" id="basic_per_eval_code3" name="per_eval_code" value="3"><label for="basic_per_eval_code3">财政重点评价项目</label>-->
  21. </span>
  22. </div>

动态拼接radio,js代码

  1. function per_eval_create(){
  2. if(evaldata.length>0){
  3. var radios='';
  4. for (var i=0;i<evaldata.length;i++){
  5. var j=1;
  6. j=j+i;
  7. radios+="<input type='radio' id='basic_per_eval_code"+ j +"' name='per_eval_id' value="+evaldata[i].id+"><label for='basic_per_eval_code"+ j +"' data-val="+evaldata[i].id+">"+evaldata[i].NAME+"</label>"
  8. }
  9. }
  10. $("#rowrightradio").append(radios);
  11. };

引入selectivizr-min.js文件后,静态的radio就支持上述css3的写法了,页面加载给页面上静态的radio赋默认值,样式生效,点击样式也生效。但是动态的按钮点击不生效,默认值样式没有。

解决动态的样式不兼容,处理办法就是addIE8.js里面的内容,复制如下

  1. $(function () {
  2. // 绑定事件监听,点击动态的checkbox添加样式
  3. $("body").on("click","input[type='checkbox']",function(e){
  4. var ischeck= $(e.target).prop('checked');
  5. if(ischeck){
  6. $(e.target).next().addClass("boxchecked")
  7. }else{
  8. $(e.target).next().removeClass("boxchecked")
  9. }
  10. });
  11. // 绑定事件监听,点击动态的radio加样式
  12. $(".customRadio").on("click","input[type='radio']",function(e){
  13. var targetname= $(e.target).attr('name');
  14. var radiosdata=$("input[name="+targetname+"]+label");
  15. for(var i=0;i<radiosdata.length;i++){
  16. $(radiosdata[i]).removeClass("boxradio");
  17. }
  18. $(this).next().addClass("boxradio");
  19. });
  20. });
  21. // 页面初始加载默认选中值的样式
  22. function selectradio(radioname){
  23. var radiosdata=$("input[name="+radioname+"]+label");
  24. $("input:checked[name="+radioname+"]+label").addClass("boxradio");
  25. }

此方法selectradio(radioname);的调用,写在ajax请求成功给表单赋值完成后调用,如下:

  1. function addBasicProjectValue(data) {
  2. $('#basic_form').form('load', {
  3. //表单赋值代码
  4. });
  5. // ie8下执行此函数,radio默认选中,只有在IE8浏览器才能有此方法,所以写在了try catch里面,程序报错不影响js继续往下执行
  6. try {
  7. selectradio('per_eval_id');//per_eval_id为radio的name值
  8. } catch(err) {
  9. console.log(err);
  10. }
  11. }
  1. Selectivizr自动检测最佳的JavaScript库,如果你一个JavaScript库都没有调用,则IE下的伪类是不起作用的。
  2. CSS样式必须使用<link>标签引入,还可以使用@import,但不能在页面里使用<style>来定义。
  3. Selectivizr必须运行在标准模式,所以你要确保你有一个DTD在你的页面顶部。
  4. 此效果非动态的。一旦样式被应用就被固定了,DOM改变时不会映射过去的。
  5. 不支持站外样式调用
  6. 如果JavaScript不可以,你可以使用<noscript>标签调用一个用以反馈提示的样式文件。

最后在安装有IE8的xp浏览器里面测试了一下,整个项目页面就凌乱了,领导直接就放弃对IE8的兼容了~辛苦整了一天,也没用上o(╥﹏╥)o,不过在仿真的IE8上点击是生效的。仅供参考

发表评论

表情:
评论列表 (有 0 条评论,570人围观)

还没有评论,来说两句吧...

相关阅读