聚合全网技术文章,根据你的阅读喜好进行个性推荐
这部分代码有什么问题,为啥checkbox显示不出来?
}
你看这个样式 left: -9999px;opacity: 0;所以看不见啦.
firebug F12选中checkbox,看右边的样式 拉到底部 看有木有
我就是这么干的啊,F12,看到的代码都贴出来了。
为什么是这样的结果?
浏览器看到的代码是这样的。。。
<html> <head> </head> <body> <table> <tr role="row"> <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=" " style="width: 28px;"> <div class="checker"> <span class=""> <input type="checkbox" class="group-checkable" data-set="#flip .checkboxes"> </span> </div> </th> <th class="sorting" tabindex="0" aria-controls="simpledatatable" rowspan="1" colspan="1" aria-label=" Username : activate to sort column ascending" style="width: 203px;"> Username </th> <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=" Email " style="width: 393px;"> Email </th> <th class="sorting" tabindex="0" aria-controls="simpledatatable" rowspan="1" colspan="1" aria-label=" Points : activate to sort column ascending" style="width: 135px;"> Points </th> <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=" Joined " style="width: 211px;"> Joined </th> </tr> </table> </body> </html>
要看右侧的Styles哪里影响啊
element.style { width: 347px; } .table thead>tr>th { border-bottom: 0; font-size: 13px; font-weight: 600; } .table-bordered>thead>tr>th, .table-bordered>thead>tr>td { border-bottom-width: 2px; } .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td { border: 1px solid #ddd; } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid #ddd; } .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } th { text-align: left; } td, th { padding: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } user agent stylesheetth { font-weight: bold; } user agent stylesheettd, th { display: table-cell; vertical-align: inherit; } Inherited from .fc-border-separate thead tr, .table thead tr { background-color: #eee; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); background-image: -webkit-linear-gradient(top,#f2f2f2 0,#fafafa 100%); background-image: -moz-linear-gradient(top,#f2f2f2 0,#fafafa 100%); background-image: -o-linear-gradient(top,#f2f2f2 0,#fafafa 100%); background-image: linear-gradient(to bottom,#f2f2f2 0,#fafafa 100%); font-size: 12px; } Inherited from table { border-spacing: 0; border-collapse: collapse; } user agent stylesheettable { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } Inherited from body { padding-bottom: 0; min-height: 100%; font-family: 'Open Sans','Segoe UI'; font-size: 13px; color: #444; } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } Inherited from html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } Pseudo ::before element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } border1 1padding8 8360 × 188 81 ‒
}
你看这个样式 left: -9999px;opacity: 0;所以看不见啦.
firebug F12选中checkbox,看右边的样式 拉到底部 看有木有
-webkit-appearance:none之类的样式,或者看看有木有z-index遮挡之类的,再要不然group-checkable加个border 看看。
引用来自“咻咻秀秀修”的评论
其实正确的方法是打开F12,点一下你所要查看的元素位置.你就可以看见为什么是这样的结果了.引用来自“cups_book”的评论
我就是这么干的啊,F12,看到的代码都贴出来了。
为什么是这样的结果?
引用来自“lieefu”的评论
先把 checkbox 外面的 span 和div去掉试试。从这些代码,看不出哪儿出了问题。临时怀疑是css把checkbox hide掉了。<th class="sorting_disabled" rowspan="1" colspan="1" aria-label="
" style="width: 28px;">
<div class="checker">
<span class="">
<input type="checkbox" class="group-checkable" data-set="#flip .checkboxes">
</span>
</div>
</th>
<th class="sorting" tabindex="0" aria-controls="simpledatatable" rowspan="1" colspan="1" aria-label="
Username
: activate to sort column ascending" style="width: 203px;">
Username
</th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="
Email
" style="width: 393px;">
Email
</th><th class="sorting" tabindex="0" aria-controls="simpledatatable" rowspan="1" colspan="1" aria-label="
Points
: activate to sort column ascending" style="width: 135px;">
Points
</th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="
Joined
" style="width: 211px;">
Joined
</th></tr>
浏览器看到的代码是这样的。。。
引用来自“咻咻秀秀修”的评论
其实正确的方法是打开F12,点一下你所要查看的元素位置.你就可以看见为什么是这样的结果了.我就是这么干的啊,F12,看到的代码都贴出来了。
为什么是这样的结果?
要看右侧的Styles哪里影响啊
引用来自“开源中国首席煤工”的评论
要看右侧的Styles哪里影响啊