CSS 不适用

CSS doesn't apply

我正在编辑 prestashop 模块的 css,但我设置的所有更改都没有出现在我的网站上。我试图删除 CSS 样式表以确保我在正确的 CSS 上工作并且所有属性都消失了,所以我试图一个一个地评论所有字符串以找出问题但是当我上传了它的属性。

站点: backlabel.com 查看页脚上的时事通讯块,正好在我试图删除 position:absolute<button>

CSS 样式表

/* Block newsletter */

 #columns #newsletter_block_left .form-group {
   margin-bottom: 0;
 }

 #columns #newsletter_block_left .form-group .form-control {
   max-width: 222px;
   display: inline-block;
   margin-right: 6px;
 }

 @media (min-width: 768px) and (max-width: 1199px) {
   #columns #newsletter_block_left .form-group .form-control {
     margin-bottom: 10px;
     margin-right: 0;
   }
 }

 #columns #newsletter_block_left .success_inline, #columns      #newsletter_block_left .warning_inline {
   text-align: left;
   padding: 1px 0 0 0;
   margin-bottom: -19px;
 }

 #columns #newsletter_block_left .success_inline {
   color: #418B19;
 }

 #columns #newsletter_block_left .warning_inline {
   color: #f13340;
 }

 /* Block newsletter footer */ 
 #footer #newsletter_block_left {
   -webkit-transition: all 0.5s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0s;
 }

 #footer #newsletter_block_left form {
   position: relative;
   margin-top: 35px;
 }

 #footer #newsletter_block_left .form-group {
   margin-bottom: 0;
   margin-top: 20px;
 }

 #footer #newsletter_block_left .form-group .form-control {
   height: 40px;
   line-height: 30px;
   width: 100%;
   padding: 5px 40px 5px 15px;
   display: inline-block;
   background-color: transparent;
   border: 1px solid #adadad;
 }

 #footer #newsletter_block_left .form-group .button-small {
   color: #999999;
   font-size: 17px;
   border: 0;
   background: transparent;
   /* HERE IS WHERE I REMOVED THE POSITION:ABSOLUTE */
   right: 0px;
   top: 0px;
   padding: 8px 10px;
 }

 .rtl #footer #newsletter_block_left .form-group .button-small {
   left: 0px;
   right: auto;
 }

 #footer #newsletter_block_left .form-group .button-small .icon {
   position: relative;
   top: -1px;
 }

 #footer #newsletter_block_left .form-group .button-small:hover {
   color: #fff;
 }

 #footer #newsletter_block_left .warning_inline {
   display: block;
   color: #f13340;
   font-size: 13px;
   line-height: 26px;
   clear: both;
 }

 @media (min-width: 1200px) {
   #footer #newsletter_block_left .warning_inline {
     display: inline-block;
     position: relative;
     top: -35px;
     margin-bottom: -35px;
     left: 15px;
     clear: none;
   }
 }

 #footer #newsletter_block_left.active {
   right: 0;
 }

 #footer #newsletter_block_left .form-group.form-error input, #footer  
 #newsletter_block_left .form-group.form-error textarea {
   background: none;
   background-color: #fff1f2;
 }

所有电子商务商店都有大量缓存,因此请尝试禁用它。

Prestashop version 1.4 and above caches data using Smarty. Cached data is stored in the following folders:

/tools/smarty/cache

/tools/smarty/compile

/tools/smarty_v2/cache

/tools/smarty_v2/compile

all of which are located in your Prestashop's installation folder. For example, if your Prestashop store has been installed in the public_html folder of your hosting account, cached information can be found in:

public_html/tools/smarty/cache

public_html/tools/smarty/compile

public_html/tools/smarty_v2/cache

public_html/tools/smarty_v2/compile

参考 Siteground

此外,如果您使用的是 chrome,请打开您的开发工具并前往 network 选项卡。在选项卡的顶部,选中显示禁用缓存的复选框。这将在开发工具打开时禁用缓存。

#footer #newsletter_block_left .form-group .button-small {

  color: #999999;

  font-size: 17px;

  border: 0;

  background: transparent;

  position: initial;

  right: 0px;

  top: 0px;

  padding: 8px 10px;

}

这正是我在浏览器上看到的内容,因此您遇到的问题很可能是由系统某处的旧缓存版本引起的。这不能直接归因于 prestashop 或您的主机,因为我看到的是更新版本,因此要解决此问题,请清除浏览器对该站点的缓存。这取决于您使用的是什么浏览器,但我相信如果必须的话,您完全有能力通过 Google 来解决这个问题。