新手CSS需要帮助调试

-1

这是我第一次发布到Stack，我在调试一个项目的CSS错误时遇到了麻烦。这里是一个链接到页面：新手CSS需要帮助调试

http://musiccomputing.com/copy-of-studioblade-5-61-key-macos-x/

你可以看到缩略图如何似乎重复，并有右侧一些文字混杂，这是它应该是什么样子：musiccomputing.com/ studioblade-5-61-key-macos-x /（抱歉，他们不会让我发布超过2个链接）。

我正在为产品说明下添加“选项卡式”部分。这是我添加的代码，导致上述问题发生。 http://pastebin.com/JhbbmFTb。我一直在试图用杀虫剂和Firebug进行调试，但不幸的是我仍然在学习，所以决定转向你们，我知道他们可以很快解决这个问题。

（顺便说一句，这是一个的Bigcommerce平台）

任何帮助深表感谢。

来源

2015-02-23 Ed Rhone

将问题发布到堆栈时 - 尝试尽可能多地隔离问题。这使得人们更快地调试代码并提供一个很好的答案。最好的方法是创建一个[fiddle]（http://jsfiddle.net/）。与pastebin相比，这是分享代码的可接受方法。您应该几乎总是这样做，而不是直接链接到您的网站。 – James 2015-02-23 13:51:48

在你的工作版本 - 你的选择框被包装在一个选择类的div。父此类分配如下CSS来选择框，修正了样式问题：

div.selector select { 
     position: absolute; 
     opacity: 0; 
     filter: alpha(opacity=0); 
     -moz-opacity: 0; 
     border: none; 
     background: none; 
     cursor: pointer; 
     height: 100%; 
    }

添加父回 - 或添加新的父亲一类。选择和箱子将再次显示正确。

编辑

在您的缩略图浏览器还有一类“ProductTinyImageList”与这些被动态添加一些风格 - 也许通过JavaScript。

在您的站点上查看控制台时，init.js的第12行也出现错误 - 此错误可能是阻止您的JS的其余部分执行并可能是破坏缩略图查看器的原因。

我会做的第一件事是修复JS错误 - 然后重新测试。

来源

2015-02-23 13:57:51 James

谢谢詹姆斯，我会和Jfiddle或者Codepen一起去的，但是我并没有使用Bigcommerce使用的所有奇怪变量。卫生署！我正在阅读你的答案，所以你说这个问题是在ProductTinyImageList中，而不是额外添加的代码？ – 2015-02-23 17:11:50

@EdRhone这些是你的HTML的两部分是不同的。但我相信这可能是因为你的JavaScript在破损的页面上返回了一个错误。如果您进入破损的页面并打开开发工具（F12），然后选择控制台选项卡 - 您将在页面上看到JavaScript错误。如果你能解决这个错误 - 你的问题很可能会消失。 – James 2015-02-23 17:39:34

正在调用jQuery的两个不同版本。卫生署！谢谢你的帮助！！！！！ – 2015-02-23 18:08:44

新手CSS需要帮助调试

回答

相关问题