Question

我有一些简化的代码，它们类似于我正在工作的网站的标题（www.akkade.be），一切正常，但Internet Explorer无法正常工作。我该如何解决？

概念：

我可以设置#masthead的高度，其余部分应遵循（适合）
在＃wp-custom-header里面有图片，这应该适合整个#masthead
最重要的是.site-branding-text
.site-branding-text内将出现一些文本和/或图像

<head>
  <style>
    body {
      position: static;
      height: 100vh;
      width: 100vw;
    }

    #masthead {
      position: relative;
      height: 90%;
      width: 90%;
      box-sizing: border-box;
      border: 5px solid red;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;

    }

    #custom-header {
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      border: 5px solid green;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

    }

    .custom-header-media {
      position: absolute;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      border: 5px solid blue;
      display: flex;
      display: -ms-flexbox;
      justify-content: center;
      text-align: center;
      background-color:rgba(35, 220, 160, 1);
    }

    #wp-custom-header {
      position: absolute;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      border: 5px solid orange;
      display: flex;
      justify-content: center;
      text-align: center;
      opacity:0.4;
    }
    #wp-custom-header img{
      height: inherit;
      width: inherit;
    }
    .site-branding {
      display: flex;
      position: relative;
      height: 50%;
      width: 50%;
      box-sizing: border-box;
      border: 5px solid black;
      align-items: center;
      justify-content: center;
    }

    .site-branding .wrap {
      display: flex;
      position: relative;
      height: 50%;
      width: 50%;
      box-sizing: border-box;
      border: 5px solid black;
      align-items: center;
      justify-content: center;
    }

    .site-branding-text {
      position: relative;
      height: 50%;
      width: 50%;
      box-sizing: border-box;
      border: 5px solid black;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <header id="masthead">
    <div id="custom-header" class="custom-header">
      <div class="custom-header-media">
        <div id="wp-custom-header" class="wp-custom-header">
            <img src="https://akkade.be/wp-content/uploads/2018/05/cropped-cropped-photo-1424894408462-1c89797f2305.jpg" alt="Compliance Excellence" srcset="https://akkade.be/wp-content/uploads/2018/05/cropped-cropped-photo-1424894408462-1c89797f2305.jpg 2000w, https://akkade.be/wp-content/uploads/2018/05/cropped-cropped-photo-1424894408462-1c89797f2305-300x180.jpg 300w, https://akkade.be/wp-content/uploads/2018/05/cropped-cropped-photo-1424894408462-1c89797f2305-768x461.jpg 768w, https://akkade.be/wp-content/uploads/2018/05/cropped-cropped-photo-1424894408462-1c89797f2305-1024x614.jpg 1024w" sizes="100vw" width="2000" height="1200">
        </div>
      </div>
      <div class="site-branding">
        <div class="wrap">
          <div class="site-branding-text">
            <h1>hi</h1>
          </div><!-- .site-branding-text -->
        </div><!-- .wrap -->
      </div><!-- .site-branding -->
    </div><!-- .custom-header -->
    <div class="navigation-top">
      <div class="wrap">
        <nav id="site-navigation" class="main-navigation">
        </nav>
        <!--.main-navigation-->
      </div>
      <!--.wrap-->
    </div>
    <!--.navigation-top-->
  </header>
</body>

</html>

Answer 1

您正在使用Internet Explorer未注册的CSS。有一种方法可以使用CSS中的IF语句为Internet Explorer添加CSS。

我认为您应该参考本文http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer，因为它提供了有关如何设计Internet Explorer的良好信息。

以下是有关如何为特定浏览器引用样式表的示例

<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

<!--[if lt IE 8]>
    <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer不支持Flex。不过，建议您在所有浏览器中测试您的网站！

网站无法在Internet Explorer上运行

1 个答案: