大佬教程收集整理的这篇文章主要介绍了jquery – Chrome中的CSS border-right，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<DOCTYPE! html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HighlighTing</title> <style type="text/css"> body { BACkground-color: rgba(0,1); } #decor-table { font-family: Calibri,"Times New Roman",Arial; font-size: 13px; text-align: left; border-collapse: collapse; } #decor-table th { font-size: 14px; padding: 10px 10px; color: rgba(153,153,1); text-transform: uppercase; } #decor-table td { padding: 3px 10px; color: #369; vertical-align: middle; } #oce-first { font-weight: bold !important; BACkground-color: rgba(204,204,0.2); border-bottom: 1px solid rgba(204,0.5); } .hover_class { color: rgba(225,225,1) !important; BACkground: rgba(204,0.2); border-left: 1px solid rgba(204,0.5); border-right: 1px solid rgba(204,0.5); } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cellClassName = false; $("td,th").hover ( function() { cellClassName = $(this).attr("class"); $("." + cellClassName).addClass("hover_class"); },function() { $("." + cellClassName).removeClass("hover_class"); } ); }); </script> </head> <body> <table width="900px" id="decor-table"> <thead> <tr id="oce-first"> <th width="17%" class="col1">test</th> <th width="18%" class="col2">test</th> <th width="13%" class="col3">test</th> <th width="11%" class="col4">test</th> <th class="col5">test</th> <th width="16%" class="col6">test</th> </tr> </thead> <tbody> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> <tr> <td class="col1">test</td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> <tr> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> </tbody> </table> </body>
.hover_class { color: rgba(225,1) !important; BACkground-color: rgba(204,0.5); -webkit-transform: translate3d(0,0); /* THIS WILL FIX IT */ }
使用％(表格单元格默认为％)Chrome使用智能并使用某种半像素精度,导致像素移动到下一个像素,留下称为“工件”的痕迹,因此您需要一些一种hackish“重画”.
如果你使用严格的PX数学定位,你也将摆脱’问题’
此外,你可以使用Box-shadow来消除这些不友好的线条98％.
如果我是你,我会在初始状态使用透明边框,因此不会显示任何跳跃
以上是大佬教程为你收集整理的jquery – Chrome中的CSS border-right全部内容，希望文章能够帮你解决jquery – Chrome中的CSS border-right所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。