如何修复 box-sizing: border-box;后退按钮未正确显示

Question

我已升级 Avada 和子主题；我在图库容器中添加了一个自定义后退按钮。升级后，只显示一半的按钮。我使用 Chrome Inspector 进行了查看，当我取消选中 box-sizing: border-box 时，按钮显示正确。子主题 style.css & 页面代码如下设置所示。

如何修复它？我对 CSS 和 HTML 知之甚少 - 刚刚开始。

仅供参考：我的 WP 网站副本使用 docker WP V5.4.1/PHP_7.4/Apache 映像安装在我的本地服务器上。

.post-content #bwg_container1_0 #bwg_container2_0 [class*='bwg_back_']{
	/* text-indent: -99999999px; */
	width: 130px;
	margin: 0 auto;
	margin-bottom: 15px;
	height: 35px;
	position: relative;
	color: #fff !important;
	background: rgb(191, 3, 9);
	background: -moz-linear-gradient(top, rgb(191, 3, 9) 0%, rgb(253, 4, 12) 49%, rgb(191, 3, 9) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(191, 3, 9)), color-stop(49%, rgb(253, 4, 12)), color-stop(100%, rgb(191, 3, 9)));
	background: -webkit-linear-gradient(top, rgb(191, 3, 9) 0%, rgb(253, 4, 12) 49%, rgb(191, 3, 9) 100%);
	background: -o-linear-gradient(top, rgb(191, 3, 9) 0%, rgb(253, 4, 12) 49%, rgb(191, 3, 9) 100%);
	background: -ms-linear-gradient(top, rgb(191, 3, 9) 0%, rgb(253, 4, 12) 49%, rgb(191, 3, 9) 100%);
	background: linear-gradient(to bottom, rgb(191, 3, 9) 0%, rgb(253, 4, 12) 49%, rgb(191, 3, 9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf0309', endColorstr='#bf0309', GradientType=0);
	-webkit-border-radius: 6px;
	border-radius: 6px;
	letter-spacing: 1px;
	font-size: 21px;
	font-family: "Share";
	padding: 8px 40px;
	line-height: 20px;
	font-weight: 300 !important;
	text-transform: uppercase;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

页面代码

[fusion_builder_container hundred_percent="no" equal_height_columns="no" menu_anchor="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image="" background_position="center center" background_repeat="no-repeat" fade="no" background_parallax="none" parallax_speed="0.3" video_mp4="" video_webm="" video_ogv="" video_url="" video_aspect_ratio="16:9" video_loop="yes" video_mute="yes" overlay_color="" video_preview_image="" border_size="" border_color="" border_style="solid" padding_top="" padding_bottom="" padding_left="1px" padding_right="0px"][fusion_builder_row][fusion_builder_column type="1_1" layout="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" border_position="all" spacing="yes" background_image="" background_repeat="no-repeat" padding_top="" padding_right="0px" padding_bottom="" padding_left="" margin_top="px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="small-visibility,medium-visibility,large-visibility" center_content="no" last="true" min_height="" hover_type="none" link="" first="true"][fusion_text][Best_Wordpress_Gallery id="10" gal_title="Projects"]

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Answer 1

我设法修复了它从 padding: 8px 40px;到填充：8px 30px;