为什么我的js脚本在IE7中无法正常工作？

Question

我写了一篇写isotope的纯js版本。

http://jsfiddle.net/b01ebfkt/

它几乎适用于所有浏览器。只是IE7似乎没有感觉到任务。

js问题：我应该使用什么样的ie7后备来确保脚本正常工作？

css问题：列中的第4个图块似乎跳转到下一行。我该如何解决这个问题？

(function(d, w, undefined) {

  // "use strict";

  function addEvent(element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
  }

  var list = d.getElementsByTagName('ul')[0];
  var listitems = list.getElementsByTagName('li');
  var list2 = d.getElementsByTagName('ul')[1].getElementsByTagName('li');

  addEvent(list,
    'click',
    function(e) {
      e = e || w.event;
      var from = e.target || e.srcElement;
      if (!/^li$/i.test(from.nodeName) || !from.getElementsByTagName('li').length) {
        var selection = from.innerHTML;
        var selectionregexp = new RegExp(from.innerHTML, 'i');
        list.getElementsByTagName('li')
        for (var i = 0; len = listitems.length, i < len; i++) {
          listitems[i].removeAttribute('class');
        }
        from.setAttribute('class', 'active');
        for (var i = 0; len = list2.length, i < len; i++) {
          var derp = list2[i].getElementsByTagName('img')[0].getAttribute('alt').toLowerCase();
          if (!selection.toLowerCase().match('alles')) {
            if (!derp.match(selectionregexp)) {
              list2[i].setAttribute('class', 'hide');
            } else {
              list2[i].removeAttribute('class');
            }
          } else {
            list2[i].removeAttribute('class');
          }
        }
        // return true;
      }
    }
  );

}(document, window))

body,
html,
ul {
  margin: 0;
  padding: 0;
}
ul {
  clear: both;
  font: 13px/1.5 arial;
  color: #666;
}
#sorter {
  float: left;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #eee;
  margin: 8px;
}
#sorter li {
  border-top: 0;
  border-bottom: 0;
  cursor: pointer;
}
#sorter li.active {
  background: #eee;
}
li {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: block;
}
div {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#portfolio {
  display: block;
  width: 100%;
}
#portfolio li {
  width: 25%;
  padding: 0;
  background: #eee;
  padding-top: 14.0625%;
  position: relative;
  -webkit-transform: scale(100%);
  -ms-transform: scale(100%);
  -o-transform: scale(100%);
  transform: scale(100%);
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
#portfolio a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#portfolio img {
  width: 100%;
  height: 100%;
  border: 0;
  position: relative;
}
#portfolio li.hide {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  width: 0;
  height: 0;
}
@media(max-width: 960px) and (min-width:768px) {
  #portfolio li {
    width: 33.33333333%;
    padding-top: 18.75%;
  }
}
@media(max-width: 767px) and (min-width:480px) {
  #portfolio li {
    width: 50%;
    padding-top: 28.125%;
  }
}
@media(max-width: 479px) {
  #portfolio li {
    width: 100%;
    padding-top: 56.25%;
  }
}

<ul id='sorter'>
  <li>Alles</li>
  <li>Animatie</li>
  <li>Video</li>
  <li>Drukwerk</li>
  <li>Fotografie</li>
</ul>
<div>
  <ul id='portfolio'>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=animatie" alt="Animatie voor henk en video">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=video" alt="video">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=drukwerk" alt="Drukwerk">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=animatie" alt="Animatie">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=fotografie" alt="Fotografie">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=drukwerk" alt="Drukwerk">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=video" alt="video">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=animatie" alt="Animatie">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=animatie" alt="Animatie">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=drukwerk" alt="Drukwerk">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=video" alt="video">
      </a>
    </li>
    <li>
      <a href="">
        <img src="http://placehold.it/480x270&text=fotografie" alt="Fotografie">
      </a>
    </li>
  </ul>
</div>

*编辑：我不禁对您将问题标记为重复并将其留在那里感到恼火。这个名字从来都不是我雷达上的标记。这里的实际问题是在IE7中我的代码中的regexp构造函数在regexp中为字符串添加了一个空格。似乎没有人能解决这个问题。尝试使用存储在其中的regexp记录var的控制台。 如何从正则表达式中删除空格？