有人能解释为什么Sencha Toolbar CSS不适用于Chrome吗

Question

我有一个顶部停靠的工具栏，我使用firebug检查元素以找到css类，它是：

  .x-toolbar-dark.x-docked-top 
  {
      border-bottom-color: #000000;
  }

我把它改成：

  .x-toolbar-dark.x-docked-top 
  {
     border-bottom-color: #000000;
     background-color: transparent !important;
  }

现在我在Firefox中看到工具栏是透明的，但在chrome中它仍然有默认的背景色（蓝色）。为什么会发生这种情况？也许我不需要在这里使用这种技术，但在某些情况下，我确实需要使用firebug找到一个非常特定的css类。有什么帮助或信息吗？

注意：我尝试使用工具栏的Cls属性，结果相同。

Answer 1

在Chrome中，背景图像（它是一个渐变）可以工作，而在Firefox中，它被忽略。

所以你所要做的就是设置背景图像和.x-toolbar-dark的背景颜色，如下所示：

.x-toolbar-dark{
   background-image: none;   
   background-color: transparent;   
}​

http://jsfiddle.net/awHkT/1/

Answer 2

Sencha适用于webkit浏览器，因此它的CSS适用于Chrome或Safari等webkit浏览器。所以这种问题一定是因为有一个前缀为-webkit的CSS规则，因此它只应用于webkit浏览器，而在firefox中被忽略。

但无论如何，工具栏都有渐变背景，所以如果你想覆盖它，你需要这样做：

background-image: none;
background-color: transparent;

最后两件事

• 覆盖Sencha的CSS是不好的做法。使用工具栏上的cls配置为其分配一个CSS类，然后使用该类为工具栏设置样式。

• 不要用Firefox测试你的应用程序，而是用Safari的Chrome。

希望这能帮助

Answer 3

您能创建一个安装SASS和Compass的自定义主题吗。对于Mac和Windows用户，安装SASS和Compass的说明略有不同。Mac用户需要打开终端应用程序并键入以下内容：

i. sudo gem install haml
ii. sudo gem install compass

您需要使用用户名和密码进行身份验证才能完成安装。Windows用户需要打开命令行并键入以下内容：

i. gem install haml
ii. gem install compass

安装Ruby

Mac用户可以休息一下，因为Ruby已经默认安装在OSX上了。Windows用户应该从rubyinstaller.org.下载Ruby安装程序

安装完成后，我们就可以设置文件夹并开始使用SASS和Compass了。

创建自定义主题

接下来需要做的是创建自己的主题SCSS文件。在..中找到sencha-touch.scss文件/lib/resources/sass，并制作该文件的副本。将文件的新副本重命名为myTheme.scs.

现在，你需要告诉索引来寻找你的新主题。使用前面的示例文件，打开index.html文件，找到显示以下内容的行：

<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">

将index.html文件中的sencha-touch.css样式表引用更改为指向myTheme.css:

<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">

SCSS和CSS

请注意，您当前正在css文件夹中包含一个名为sencha-touch.css的样式表，并且在scss文件夹中有一个匹配的文件，名为senchas-touch.scss。编译scss文件时，它会在css文件夹中创建一个新文件。这个新文件的后缀将是.css，而不是.scs.

.scs是SASS文件的文件扩展名。SCSS是Sassy CSS的缩写。

现在您已经设置好了路径，让我们来看看我们制作的主题文件副本。打开myTheme.scs文件。您应该看到以下内容：

@import 'sencha-touch/default/all';
@includesencha-panel;
@includesencha-buttons;
@includesencha-sheet;
@includesencha-picker;
@includesencha-tabs;
@includesencha-toolbar;
@includesencha-toolbar-forms;
@includesencha-carousel;
@includesencha-indexbar;
@includesencha-list;
@includesencha-list-paging;
@includesencha-list-pullrefresh;
@includesencha-layout;
@includesencha-form;
@includesencha-msgbox;
@includesencha-loading-spinner;

此代码获取所有默认的SenchaTouch主题文件，并将它们编译到位于CSS文件夹中的新CSS文件中。如果在..中打开sencha-touch.css文件/lib/resources/css文件夹，您将看到以前使用的压缩css文件。这个文件相当大，但它都是根据基本命令创建的。

最棒的是，您现在可以用一行代码更改应用程序的整个配色方案。

基本颜色

Sencha Touch主题中的一个关键变量是$base_color。这种颜色及其变体贯穿整个主题。为了理解我们的意思，您可以更改主题的颜色，在myTheme.scs文件的顶部添加以下内容（高于所有其他文本）：

$base_color: #d1d3d4; //for example, color gray

接下来，您需要重新编译SASS文件来创建样式表。从命令行，您需要更改到myTheme.scs文件所在的sass文件夹。进入文件夹后，在命令行中键入以下内容，然后按Enter键：

compass compile

有趣的是：），这将使用新的$base_color值更新myTheme.css文件。在Safari或FF或任何地方重新加载页面，您应该会看到应用程序的新灰色外观。

看看这个http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application

我希望这能有所帮助。：）