兄弟层级，当上一元素带有阴影，下一元素为rich-text时。rich-text里的图片的层级比阴影高，会显示在阴影上方。

带阴影的组件与rich-text里的图片层级有bug about uni-app HOT 1 CLOSED

dcloudio commented on April 28, 2024

带阴影的组件与rich-text里的图片层级有bug

from uni-app.

Comments (1)

xiaoyucoding commented on April 28, 2024

CSS 的样式及元素的排版规范如此，HTML 中同样如此。
解决的办法：
如果不希望兄弟节点遮挡阴影部分，下一个兄弟节点设置 margin-top 等样式让出相应的高度即可。

以下是测试代码
uni-app

<template>
  <view class="content">
    <view class="shadow">
      这是有阴影的节点
    </view>
    <rich-text :nodes="nodes"></rich-text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'rich-text',
        nodes: [{
          name: 'div',
          attrs: {
            class: 'div-class',
            style: 'line-height: 60px; color: red;text-align:center;'
          },
          children: [{
            type: 'text',
            text: 'Hello&nbsp;uni-app!'
          }, {
            name: 'img',
            attrs: {
              src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]'
            }
          }]
        }]
      }
    }
  }
</script>
<style>
  .shadow {
    box-shadow: 10px 10px 5px #888888;
  }

  .div-class {
    margin-top: 10px;
  }
</style>

普通的 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <style type="text/css">
      .shadow {
        box-shadow: 10px 10px 5px #888888;
      }
    </style>
  </head>
  <body>
    <div class="shadow">这是有阴影的节点</div>
    <div>
      <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]">
    </div>
  </body>
</html>

from uni-app.

带阴影的组件与rich-text里的图片层级有bug about uni-app HOT 1 CLOSED

Comments (1)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs