使用 Foundation 5 破坏了 jQuery 旋钮答案

【问题标题】：jQuery knob broken using Foundation 5使用 Foundation 5 破坏了 jQuery 旋钮
【发布时间】：2014-04-23 19:26:37
【问题描述】：

美好的一天。我正在尝试将 Anthony Terrien 的 jquery Knob 与 Zurb Foundation 一起使用，但似乎文本输入已损坏。截图如下：

http://i.imgur.com/iaPf1yj.png

如您所见，input[type="text"] 位于页面的左下方。我试图在一个空的 HTML 页面中制作它，它工作得很好，所以我认为问题出在 Foundation 的实现上，但我找不到它的哪个部分破坏了旋钮。

这里是 HTML：

<div class="row">
        <div class="medium-12 column bpm">
            <div class="medium-5 medium-centered column">
                    <input type="text" value="100" class="dial">
            </div>
        </div>
    </div>

还有 JS：

$('.dial').knob({

    'min': 0,
    'max': 200,
    'angleOffset': 45,
    'fgColor': '#cc0000',
    'font': 'Raleway',
    'fontWeight': '300',
    'thickness': .1
});

【问题讨论】：

我试图删除 Foundation 的 CSS 文件，然后旋钮工作正常，所以问题出在 Foundation 的 CSS 样式上。现在我只需要找出 Foundation 的 CSS 的哪一部分影响了旋钮。
确保在基础 css 文件之后加载 jquery 旋钮 css 文件。它可能会解决基础覆盖规则。
jQuery 旋钮没有 css 文件。它使用 .css() 方法来设置画布的样式。但是由于您的评论，我知道下一步该做什么。
好的，我解决了这个问题。发生了什么：基础 css 文件的所有文本输入都有一个 display:block。我所做的是我删除了 Foundation.css 文件中 input[type="text"] 的所有默认样式。所有文本输入的样式都被删除了，所以我将它们添加到我自己的 style.css 文件中。我不认为这是最好的解决方案，但至少它解决了问题。
更新：最后我只使用了 :not 选择器。

标签： jquery html css zurb-foundation jquery-knob

【解决方案1】：

好的，我现在想出了一个解决方案。这就是我所做的。在foundation.css 文件中，我编辑了导致问题的display:block。所以我就用了这个：

input[type="text"]:not(.dial){
 /* All Foundation styles go here */
}

【讨论】：

【解决方案2】：

更新foundation.css 会随着时间的推移而产生更新问题。如果其他人遇到这种情况，我建议您申请：

 style="display: inline;"

或创建一个自定义类并将其应用于旋钮，例如：

.knob-fix{
    display: inline !important; 
}

【讨论】：