时间戳

首页 > 解决方案 > svg线条对底部边框的奇怪效果

html - svg线条对底部边框的奇怪效果

问题描述

有人说我如果一条svg线对border-bottom产生奇怪的影响？

在此处输入图像描述

我有这个html：

 <div id="father">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
    <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
  </svg>
  <div id="subsling"></div>
  <!-- This line appears and disappears depending on the size of the browser window. -->
  </div>

标签： htmlcsssvgcross-browser

解决方案

正如我所评论的：添加svg{display:block;} 到 svg

svg{width:100%;display:block;}
#subsling{background: #e4f1fe;padding:1em;}
<div id="father">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
          <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
</svg>  
 <div id="subsling">
   <p>wertyui wertyuio ertyufghjklñ  ertyuiop eghjkl </p>
 </div>
</div>

推荐阅读