小编mid*_*ack的帖子

为我的菜单使用图标(.png透明背景).IE9,Chrome,Firefox,safari,opera没有任何问题.但是如果我用IE7或IE8打开页面,图像周围会出现黑色边框.CSS代码;

.menu-item1{
  background:url(img/spriteimage.png) no-repeat 0 0;
  height:20px;
  width:20px;
  opacity:0.5;
 } 

我怎样才能解决这个问题？

HTML

<div class="header">Header</div>
 <div class="body">
    <table class="body-table">
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
           <td>Cell</td>
       </tr>
       <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
       </tr>
       <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
        <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
    </table>    
 </div>
<div class="footer">
    <button>Submit</button>
</div>

CSS

.header{
    height:50px;
    background-color:#ccc;
    width:500px;
}
.body{
    width:500px;
    max-height:600px;
    text-align:center;
    background-color:#ddd;
    overflow:auto;
}
.body .body-table{
    border-collapse:collapse;
    text-align:center;
    margin:0 auto;
    width:100%;
 }
.footer{
    width:500px;
    height:50px;
    background-color:#eee;
}

JQUERY

var windowHeight = $(window).height();
$(window).resize(function(){ …

HTML

<div class="block">
    <div class="element1">text text text text </div>
    <div class="element2">text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

CSS

.block{
    background:#F00;
    float: left;
    height: 90px;
    padding: 0 24px 0 0;
    position: relative;
    width: 256px;
}   
.block .element1{
    color: #000;
    display: block; 
    float: left;
    font-size: 32px;
    height: 35px;
    overflow: hidden;
    padding: 25px 0 0;
    text-align: right;
    width: 100%;
}
.block …

HTML

<input type="text" class="datepicker01">
<input type="text" class="datepicker02">

我有 2 个打开日期选择器的输入。我想将类添加到在第二个输入中打开的日期选择器 (class="datepicker2")。我怎样才能做到这一点？

http://jsbin.com/cixubuto/1/edit

我想在滚动结束后向选定元素添加一个类。JS如何检测滚动结束？

超文本标记语言

<ul class="list" id="wrapper">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li id="element">7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
 </ul>

JS

const element = document.getElementById('element');
const y = element.getBoundingClientRect().top + window.scrollY;


window.scroll({
  top: y,
  behavior: 'smooth'
});

JSBIN 示例

我想从表中的最后一个tr中选择并更改之前的tds,但我不能.我怎么能用jQuery做到这一点？

选择prev tr with;

$(".tbl tr:last-child").prev()

但我如何选择prev tr的孩子呢？

http://jsfiddle.net/dba7v/1/

如果父元素具有特定的类,我想有条件地赋值.经验:

HTML

<div class="parent">
    <div class="child">Some Text</div>
</div>

CSS

.child {
    font-size: 16px;
}

但如果父元素有一个名为"大"的类

HTML

<div class="parent big">
    <div class="child">Some Text</div>
</div>

我想改变价值如下

CSS

.child {
    font-size: 20px;
}

例如如下:

.child {
  font-size: parent.hasClass('big') ? 20px : 16px;
}

我怎样才能在SASS中做到这一点？

数据

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

我想将这些数据拆分为3列,并希望如下所示:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
    <li>10</li>
</ul>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    ...
    <li>20</li>
</ul>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    ...
    <li>30</li>
</ul>

使用ngfor时如何拆分数据？

<ul *ngFor="let item of arr">
    <li>{{item}}</li>
</ul>