前端 - 这是不是移动端得小bug

Question

多种方法实现锯齿形边框-背景图多出一根小细线

1. 之前用css3 渐变来实现，多出一根小细线， 弃之

2. 然后，切出小三角形，背景x轴循环，发现也是一样

ps: pc端就显示正常，不知道为什么，难道我要把整个锯齿边框切图出来，才可以吗。

<p class="sawtooth_pide_up"></p> //--这里直接将锯齿线做成一个p，用来分割
.i_sawtooth_pide {
    height: 12px;
    width: 100vw;
    overflow: hidden;
    border-top: 2px solid #eadfd9;
    background: linear-gradient(-45deg, red 50%, transparent),
                linear-gradient(-135deg, blue 50%);
    background-size: 12px 12px;
    background-repeat: no-repeat;   
}

// 这是第二种

.sawtooth_pide_up {
background-color: #eadfd9;
border: 0;
width: 100%;
height: 8px;
background-image: url('./imgs/sawtooth_up.png');
background-size: auto 100%;
background-repeat: repeat-x;
background-position: 0 0;

}

Answer 1

Just set a margin—top:-1px for the part below the saw teeth

Answer 2

The correct answer upstairs is to move the lace down a little

Answer 3

1. Try clearing floats or making them block-level elements.

2. As mentioned on the 1st floor, make a margin.

Answer 4

Obviously, there is a gap between the background and the sawtooth.

You need to post the code to find out the reason for the gap.
According to your description, which is only available on the mobile version but not on the PC version, I’m just making an irresponsible guess

A calculation problem similar to REM caused the gap between them to be less than 1PX, and then the browser rendered this as 1PX.

Answer 5

Cut the image vertically and tile it horizontally

Answer 6

Try:
font-size:0;