CSS外部 - Firefox浏览器支持 [英] CSS Shape Outside - Firefox Browser Support

查看：142
本文介绍了CSS外部 - Firefox浏览器支持的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在试图获得一个CSS形状工作的交叉浏览器，我已经在Chrome和Safari中工作没有任何问题，我似乎无法得到它的工作在Firefox（未测试IE，但不期待



codepen

p>

这是HTML：

 < div class = > 
< section class =hero> 
< section class =slide> 
< div class =shaped>< / div> 
< div class =hero-text> 
< h2>专业的业务维护服务< / h2> 
< p>在英格兰西北部，包括Liveprool，曼彻斯特，普雷斯顿，威根和圣赫伦斯< / p> 
< / div> 
< / section> 
< / section> 
< / div>

这里是CSS：

  .container {
 width：960px; 
 margin：0 auto; 
} 
 section.hero {
 padding：8px; 
 box-sizing：border-box; 
 overflow：hidden; 
 width：100％; 
 height：400px; 
 float：left; 
 section.slide {
 position：relative; 
 .shaped {
 background-size：cover; 
 shape-outside：polygon（20％0，100％0，100％100％，0％100％）; 
 clip-path：polygon（20％0，100％0，100％100％，0％100％）; 
 background-image：url（http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg）; 
 height：384px; 
 float：left; 
 width：70％; 
 float：right; 
 shape-margin：20px; 
} 
 .hero-text {
 box-sizing：border-box; 
 background-color：＃333; 
 color：white; 
 padding：30px; 
 height：384px; 
 width：50％; 
 h2 {
 margin-bottom：20px; 
} 
} 
} 
}



你试过一个Adobe形状polyfill没有任何区别，是否有任何其他选项，或者我应该考虑改变设计完全吗？



谢谢

解决方案

您可以使用 svg 的 clipPath 跨浏览器支持。



  .container {width：960px; margin：0 auto;} section.hero {padding：8px; -moz-box-sizing：border-box; box-sizing：border-box; overflow：hidden; width：100％; height：400px;浮动：左;} section.hero section.slide {位置：相对;} {形背景：网址（http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg）; height：384px; width：100％;} section.hero section.slide .hero-text {-moz-box-sizing：border-box; box-sizing：border-box; background-color：＃333;颜色：白色; padding：30px; height：384px;宽度：50％;} section.hero section.slide .hero文本H2 {保证金底：20像素;} {SVG浮动：权利;}

<预类= snippet-code-html lang-html prettyprint-override> < div class =container> < section class =hero> < section class =slide> < svg width =700height =550> < defs> < clipPath id =shape> < path d =M100,0 L700,0 L700,550 L0,550z/> < / clipPath> < / defs> < foreignObject clip-path =url（#shape）width =100％height =100％> < div class =shaped>< / div> < / foreignObject> < / svg> < div class =hero-text> < h2>< h2>业务专业物业维修服务< / h2> < p>在英格兰西北部，包括Liveprool，Manchester，Preston，Wigan和St. Helens< / p> < / div> < / section> < / section>< / div>





您可以使用此方法添加曲线而不是直线。



以下是一些示例。



> 



  .container {width：960px; margin：0 auto;} section.hero {padding：8px; -moz-box-sizing：border-box; box-sizing：border-box; overflow：hidden; width：100％; height：400px;浮动：左;} section.hero section.slide {位置：相对;} {形背景：网址（http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg）; height：384px; width：100％;} section.hero section.slide .hero-text {-moz-box-sizing：border-box; box-sizing：border-box; background-color：＃333;颜色：白色; padding：30px; height：384px;宽度：50％;} section.hero section.slide .hero文本H2 {保证金底：20像素;} {SVG浮动：权利;}

<预类= snippet-code-html lang-html prettyprint-override> < div class =container> < section class =hero> < section class =slide> < svg width =700height =550> < defs> < clipPath id =shape> < path d =M100,0 L700,0 L700,550 L0,550 Q0,275 200,0/> < / clipPath> < / defs> < foreignObject clip-path =url（#shape）width =100％height =100％> < div class =shaped>< / div> < / foreignObject> < / svg> < div class =hero-text> < h2>< h2>业务专业物业维修服务< / h2> < p>在英格兰西北部，包括Liveprool，Manchester，Preston，Wigan和St. Helens< / p> < / div> < / section> < / section>< / div>





> 



  .container {width：960px; margin：0 auto;} section.hero {padding：8px; -moz-box-sizing：border-box; box-sizing：border-box; overflow：hidden; width：100％; height：400px;浮动：左;} section.hero section.slide {位置：相对;} {形背景：网址（http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg）; height：384px; width：100％;} section.hero section.slide .hero-text {-moz-box-sizing：border-box; box-sizing：border-box; background-color：＃333;颜色：白色; padding：30px; height：384px;宽度：50％;} section.hero section.slide .hero文本H2 {保证金底：20像素;} {SVG浮动：权利;}

<预类= snippet-code-html lang-html prettyprint-override> < div class =container> < section class =hero> < section class =slide> < svg width =700height =550> < defs> < clipPath id =shape> < path d =M100,0 L700,0 L700,550 L-210,550 Q200,275 150,0/> < / clipPath> < / defs> < foreignObject clip-path =url（#shape）width =100％height =100％> < div class =shaped>< / div> < / foreignObject> < / svg> < div class =hero-text> < h2>< h2>业务专业物业维修服务< / h2> < p>在英格兰西北部，包括Liveprool，Manchester，Preston，Wigan和St. Helens< / p> < / div> < / section> < /段>< / DIV>





> 



  .container {width：960px; margin：0 auto;} section.hero {padding：8px; -moz-box-sizing：border-box; box-sizing：border-box; overflow：hidden; width：100％; height：400px;浮动：左;} section.hero section.slide {位置：相对;} {形背景：网址（http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg）; height：384px; width：100％;} section.hero section.slide .hero-text {-moz-box-sizing：border-box; box-sizing：border-box; background-color：＃333;颜色：白色; padding：30px; height：384px;宽度：50％;} section.hero section.slide .hero文本H2 {保证金底：20像素;} {SVG浮动：权利;}

<预类= snippet-code-html lang-html prettyprint-override> < div class =container> < section class =hero> < section class =slide> < svg width =700height =550> < defs> < clipPath id =shape> < path d =M100,0 L700,0 L700,550 L75,550 Q-70,412.5 50,200 Q100,100 100,0/> < / clipPath> < / defs> < foreignObject clip-path =url（#shape）width =100％height =100％> < div class =shaped>< / div> < / foreignObject> < / svg> < div class =hero-text> < h2>< h2>业务专业物业维修服务< / h2> < p>在英格兰西北部，包括Liveprool，Manchester，Preston，Wigan和St. Helens< / p> < / div> < / section> < / section>< / div>


I've been trying to get a CSS shape working cross browser, I've got it working in Chrome and Safari without any issues, I cannot seem to get it working in Firefox (not tested IE yet, not looking forward to that).

codepen

Here is the HTML:

<div class="container">
  <section class="hero">
    <section class="slide">
      <div class="shaped"></div>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

Here is the CSS:

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float:left;
  section.slide {
    position:relative;
    .shaped {
      background-size: cover;
      shape-outside: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
      clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
      background-image: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
      height: 384px;
      float:left;
      width: 70%;
      float: right;
      shape-margin: 20px;
    }
    .hero-text {
      box-sizing: border-box;
      background-color: #333;
      color: white;
      padding: 30px;
      height: 384px;
      width: 50%;
      h2 {
        margin-bottom: 20px;
      }
    }
  }
}

I've tried an Adobe shape polyfill which didnt make any difference, is there any other options for this or should I be considering changing the design altogether?

Thanks

解决方案

You could use svg's clipPath for cross-browser support.

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550z" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

You could add curves instead of a straight line using this approach.

Here are some examples.

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550 Q0,275 200,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L-210,550 Q200,275 150,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L75,550 Q-70,412.5 50,200 Q100,100 100,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

这篇关于CSS外部 - Firefox浏览器支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆