验证V型轮播箭头重叠问题

Question

我遇到了Vuetify v-carousel的问题。左右箭头在左侧重叠的位置。
图片

Vue文件

<template>
  <v-card v-if="propertyThis">
    <v-carousel
      cycle
      hide-delimiters
    >
      <v-carousel-item
        v-for="(item,i) in propertyThis.pictures"
        :key="i"
        :src="item"
      />
    </v-carousel>

package.json文件

  "dependencies": {
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2"
  },

我没有发现this page上的代码有明显的区别。 如何解决？

任何帮助将不胜感激。

更新：

我注释掉了.css文件中以及.vue文件中'style'标记之间的所有行。但是问题仍然存在。
这是页面中的html部分：

<div class="v-window__prev">
    <button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" aria-label="Previous visual">
        <span class="v-btn__content">
            <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--dark" style="font-size: 36px;"/>
        </span>
    </button>
</div>
<div class="v-window__next">
    <button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" aria-label="Next visual">
        <span class="v-btn__content">
            <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--dark" style="font-size: 36px;"/>
        </span>
    </button>
</div> 

我找不到明显不对的地方。

Answer 1

好吧，我通过在v-card标签之前添加v-app标签解决了该问题。

<template>
  <v-app>
    <v-card>
      ...
    </v-card>
  </v-app>
</template>

希望它可以帮助遇到类似问题的人。