【问题标题】:IE7, IE8, IE9 support for Laravel application with Bootstrap for "placeholder"IE7、IE8、IE9 对 Laravel 应用程序的支持,带有用于“占位符”的 Bootstrap
【发布时间】:2015-08-17 03:49:19
【问题描述】:

我已经构建了一个 Laravel 4.2 应用 Sputnikart

使用 Bootstrap v3.2.0 并将该网站用作我的投资组合的一部分,我最近发现访问我的网站并可能访问该网站的人中有超过 50% 使用的是 IE7 到 IE9,而它在其他网站上也能完美运行浏览器,在 IE8 上一切都乱套了。

我花了一天多的时间研究和尝试解决许多问题的不同方法(添加 html5shiv.js 和 respond.js)来修复菜单崩溃和变得不可用的问题,并尝试使用 Mathias Bynens (placeholder.js) 文件来修复占位符不可见,但是一旦我这样做了,我的应用程序就停止了正确的身份验证,因此即使我也无法登录。

我的 master.blade 上有通常的声明

<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->

<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en">
<![endif]-->

<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en">
<![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en">
<!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...

我真的发布这个是为了看看是否有人可以提供良好的指针和资源来处理 Laravel 4.2 应用程序和 Bootstrap for IE7 到 IE9,问题太多了,无法提及

谢谢

条件条件... .ie6 .ie7 .ie8 .form-control::-moz-placeholder { _color:蓟; *颜色:蓟; 颜色:蓟\9; }

【问题讨论】:

  • 把这个贴在小提琴之类的地方。看起来您在 gt IE 8 条件评论之后有一个开放评论
  • @albert 网站已上线并在大多数浏览器上正常运行,可以使用检查器查看头部代码
  • 是的,我敢打赌那条评论validator.w3.org/nu/…
  • @albert 你是对的,我已经修复了它,但它并没有解决我的占位符问题 - 无论如何谢谢
  • 检查时在ie8中声明了哪些属性?抱歉,我没有安装,无法在这台机器上获得好的虚拟机。我敢打赌,条件 cmets 很容易解决这个问题

标签: javascript laravel twitter-bootstrap-3 internet-explorer-8 placeholder


【解决方案1】:

我在 laravel 4.2 应用程序与 IE8 的兼容性方面遇到了类似的问题。 我的网站是 sirai.gim.med.up.pt/index.php/ram/create

除了 IE8 和更低版本之外,它在所有浏览器上都可以正常工作。 我的 main.blade 中没有声明,是吗?

<!DOCTYPE html>
<html>
<head>
    <title>{{trans('views.title')}}</title>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{HTML::style('css/main.css')}}
	
    {{HTML::style('http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')}}
    {{HTML::style('css/datepicker3.css')}}
     {{HTML::style('css/bootstrap-table.css')}}
	
</head>

测试了在这里不起作用的刀片,就像你们两个一样http://validator.w3.org/nu/?doc=http%3A%2F%2Fsirai.gim.med.up.pt%2Findex.php%2Fram%2Fcreate

感谢您的支持:)

这是我第一次作为注册用户在 Stack Overflow 上发帖,如果我在上面的答案中没有看到一些解决方案,请见谅。

【讨论】:

    【解决方案2】:

    @Toni_Manshengo

    在头部添加我在问题中列为代码的内容

    您还需要将以下文件添加到您的应用程序和结束标记上方(jquery 版本不得高于显示的版本,因为更高版本与旧版 IE 浏览器不兼容

    @section ('scripts')
    {{ HTML::script('js/jquery-1.11.3.min.js') }}
    {{ HTML::script('js/bootstrap.min.js') }}
    {{ HTML::script('js/modernizr-2.8.3.min.js') }}
    {{ HTML::script('js/placeholder.min.js') }}
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    

    您还需要为 IE7、IE8、IE9 的 css 文件添加一些额外的样式

    /* support for IE6/7 uses media, */
    @media, { 
    .form-control::-moz-placeholder .ie6 .ie7 { color: thistle; } 
    }
    /* support for IE8 uses \0 */
    @media all\0 { 
    .form-control::-moz-placeholder .ie8 { color: thistle; } 
    } 
    /* support for IE9 uses \9  targets IE8 and bellow */
    @media all and (monochrome:0) { 
    .form-control::-moz-placeholder .ie8 .ie9 { color: thistle\9; }
    } 
    .form-control:-ms-input-placeholder {
    color: #999999;
    }
    /* support for IE6/7 uses media, */
    @media, { 
    .form-control:-ms-input-placeholder .ie6 .ie7{ color: thistle; } 
    }
    /* support for IE8 uses \0 */
    @media all\0 { 
    .form-control:-ms-input-placeholder .ie8 { color: thistle; } 
    } 
    /* support for IE9 uses \9  targets IE8 and bellow */
    @media all and (monochrome:0) { 
    .form-control:-ms-input-placeholder .ie8 .ie9 { color: thistle\9; }
    } 
    .form-control::-webkit-input-placeholder {
    color: #999999;
    }
    /* support for IE6/7 uses media, */
    @media, { 
    .form-control::-webkit-input-placeholder .ie6 .ie7 { color: thistle; } 
    }
    /* support for IE8 uses \0 */
    @media all\0 { 
    .form-control::-webkit-input-placeholder .ie8 { color: thistle; } 
    } 
    /* support for IE9 uses \9  targets IE8 and bellow */
    @media all and (monochrome:0) { 
    .form-control::-webkit-input-placeholder .ie8 .ie9 { color: thistle\9; }
    } 
    

    希望这可以帮助您和其他人在仍然有很多 IE8 用户的领域,我花了很长时间才弄明白 佐德

    【讨论】:

      猜你喜欢
      • 2013-03-04
      • 1970-01-01
      • 2011-07-29
      • 2012-03-10
      • 1970-01-01
      • 2012-10-27
      • 2014-01-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多