Subscribe on changes!

相同的代码在 .vue 中和 在 .html 中样式展示不同

avatar
Tyh2001
May 22nd 2023

Vue version

3.3.4

Link to minimal reproduction

——

Steps to reproduce

app.vue:


<template>
  <div class="box">
    <div class="inner">
      <div class="text">加载失败</div>
    </div>
  </div>
</template>

<style >
.box {
  background-color: blue;
}

.inner {
  display: inline-block;
}

.text {
  font-size: 12px;
  background-color: #eee;
}
</style>

index.html

<style>
  .box {
    background-color: blue;
  }

  .inner {
    display: inline-block;
  }

  .text {
    font-size: 12px;
    background-color: #eee;
  }
</style>

<body>
  <div class="box">
    <div class="inner">
      <div class="text">加载失败</div>
    </div>
  </div>
</body>

Style rendering: d70bac99ae9dffbefe0edded2d3429b

What is expected?

Maintain consistency between .vue style and .html

What is actually happening?

Inconsistency between .vue style and html

System Info

window11

Any additional comments?

No response

avatar
LinusBorg
May 22nd 2023

Provide a reproduction as per the guidelines

avatar
Tyh2001
May 22nd 2023

根据指南提供复制品

I don't understand what you mean

avatar
LinusBorg
May 22nd 2023

"Link to reproduction" - you need to provide actual runnable code to for use to reproduce the problem. a snippet to copy and paste is not good enough as we can't be ure to correctly emulate the context you run thi code in.

GitHub Track