小编pap*_*ley的帖子

我已经在stackoverflow上阅读了关于history.js的所有帖子,包括,this,this和this以及查看源代码,但作为javascript/jquery的新手,我无法弄清楚如何实际实现html 5历史记录支持和回退以支持ie8/9等html4浏览器.我可以通过尽可能多地呈现一致的URL来体会用户体验带来的好处,如何解决深层链接并允许我想实现的书签,但是当我尝试在我的网站上实际使用它时,我有点迷失.

将history.js脚本添加到我的页面后

我承诺修改的代码是:

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); …

原始问题

我似乎无法弄清楚这些错误(我已经完成了正常的错误检查过程 - 验证,控制台调试等......).

不知何故,该网站在最新的浏览器上正常工作(在Windows和mac的safari,chrome,firefox,opera上最新的3个版本)并且它适用于ie9,但ie10和ie11有一些主要的错误(我的测试发生在browserstack上).

测试服务器上的问题网站:http://flourishcle.com/globalmba/

ie10 // ie11问题:

• 该.content范围内的每个#semester消失-我看到它在幻灯片中,然后消失
• min-width在imgs内.content有不想要的结果(即使height: auto应用)
• Overflow: hidden 没有被尊重(与倾斜的伪元素相关联) - 重叠的内容阻止点击底层内容

我的第一个想法是display: table我用来创建网站结构的问题,但这不应该影响视觉效果或创建压缩图像.

编辑//更新

所以,我已经将问题缩小到SkewX和ie10/ie11的特定问题.

基本HTML:

<section class="section-1 angled">
  <div class="wrapper">
    //Content
  </div>
</section>
//Structure repeated multiple times

基本CSS(使用Compass导入供应商细节):

.angled {
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.wrapper {
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

如果我禁用其中一个skewX样式,一切都按预期工作(除了它看起来很糟糕).

但是,当两者都启用时,会出现文本问题:文本,div等等只是停止可见.如果您打开开发工具并选择div,有时会显示内容.如果您选择文本应该有时会显示的区域.但一般来说内容并没有显示出来.我没有把这看作是一个报道的bug.我知道有针对性的解决方法,即> 9(因为不支持条件注释,但希望找到解决方案).

*倾斜问题似乎不会影响ie9