链接到网页和帖子底部的截图
我正在使用插件 WP-bakery 重新构建一个网页。原网页没有任何问题。当我尝试对新网页使用相同的 CSS 时,图像底部有黑线。这些图像是指向其他页面的超链接,但黑线不是在文本下方形成,而是在文本所在的图像下方。我通过向超链接添加新边框来测试这一点,并且文本下方出现了新行,所以这不是问题。我认为这与不正确的边距和填充有关,但我不知道哪里出错了。这是我在两个网站上使用的 CSS 文件:
.entry-content a img,
.entry-content a,
.entry-content a img:hover,
.entry-content a:hover {
box-shadow:none;
}
.header-sticky-hide, #colophon, #masthead {display:none !important;}
#content {margin:0;padding:0;}
.keuze-txt { margin-top: -75%;
text-shadow: 3px 3px 4px rgba(0,0,0,0.35);
font-weight: 700;
color: #fff!important;
position: absolute;
z-index: 99;
text-align: center;
}
.keuze-txt p {
width: 75%;
margin: 0 auto;
}
.keuze-txt a,
.keuze-txt strong {
color:#fff !important;
}
.keuze-txt a {
line-height:100px;
padding:10px 15px;
color:#fff;
}
.kraam .keuze-txt a {
background:#b8ccea
}
.ack .keuze-txt a {
background:#ecc8cd
}
.baker .keuze-txt a {
background: #ffbe9f
}
.keuze-txt em {
font-size: 0.5em;
font-style: normal;
}
.keuze-img {
margin-top: -130%;
margin-bottom: 0;
position: absolute;
z-index: 999;
margin-left: 33%;
border: transparent;
}
.keuze-bg {
max-height: 100vh;
}
.keuze-bg {
max-height: 100vh;
}
.keuze-bg img{
opacity:0.3;
}
.keuze-col:hover .keuze-bg img{
opacity:1;
}
@media screen and (max-width: 768px) {
.keuze-img {
margin-top: -160%;
margin-left: 25%;
}
.keuze-txt {
margin-top: -90%;
}
.keuze-txt p {
width:90%;
}
}
这是 HTML:
[vc_row full_width="stretch_row_content_no_spaces" full_height="yes" css=".vc_custom_1600777042471{background-position: 0 0 !important;background-repeat: repeat !important;}"]
[vc_column width="1/3" el_class="keuze-col kraam" css=".vc_custom_1600778593155{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #b8ccea !important;}"]
[vc_single_image image="1208" img_size="full" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-bg" css=".vc_custom_1600778060038{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_single_image image="1225" img_size="large" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-img" css=".vc_custom_1600777981827{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_column_text el_class="keuze-txt"]
Kraam & Co staat voor professionaliteit, betrouwbaarheid en jarenlange ervaring op het gebied van kraamzorg in Abcoude en omstreken.
Ga naar Kraam & Co »
[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col ack" css=".vc_custom_1600778027984{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ecc8cd !important;}"]
[vc_single_image image="1209" img_size="full" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-bg"]
[vc_single_image image="1214" img_size="large" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]
Elke baby is uniek, geen bevalling is gelijk. De kraamverzorgenden van Ack Zorgmaat Kraamzorg zijn erin gespecialiseerd om een kraamtijd tot een heerlijk begin te maken van de nieuwe fase in uw leven.
Ga naar Ack Zorgmaat Kraamzorg »
[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col baker" css=".vc_custom_1600778043514{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ffbe9f !important;}"]
[vc_single_image image="1210" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-bg"]
[vc_single_image image="1228" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]
Met ruim 30 jaar ervaring in de kraamzorg weten we waar we het over hebben. Van degene die het intakegesprek met je voert tot aan ons management: kraamzorg zit in onze genen.
Ga naar De Baker Kraamzorg »
[/vc_column_text][/vc_column][/vc_row]
问题可能出自哪里?我花了 3 个小时查看它并多次重建页面,但我无法找到问题所在。
链接
正常工作的网页:
https ://www.zorgmaat.nl/
固定的
将此添加到 WP-bakery 中的自定义 CSS 中,现在问题似乎消失了。
.colors-custom .entry-content a, .colors-custom .entry-summary a, .colors-custom .comment-content a, .colors-custom .widget a, .colors-custom .site-footer .widget-area a, .colors-custom .posts-navigation a, .colors-custom .widget_authors a strong { -webkit-box-shadow: none; box-shadow: none; }