CSS zurb 基础和 dhtmlx

Question

我有一个需要 zurb 基础 css 和 dhtml 调度程序的项目，但 css 运行得不是很好。

特别是有两个问题。

由于桌子上的 .56em .62em 填充，月历未对齐。

比较复杂的是日历上的约会。 这就是它的样子。注意侧面菜单中的漏洞。

默认样式有问题。

我需要删除它们才能正确呈现页面。

我们使用的是 scss 版本的foundation，但我对它的功能不是很熟悉，dhtmlx 控件不使用它。

所以我的基本问题是我应该如何更改这些样式以最小化对基础或 dhtml 的影响？

我确定我可以使用 java 脚本，但我认为这会很痛苦，因为日历更改必须找到所有元素以再次应用样式，而且我真的希望有一个漂亮的 css 技巧。 =)

谢谢！

******* 编辑 ***********

通过在基础之后添加另一个样式表以覆盖冲突的样式，很快修复了 chrome 和 IE 的表格问题。简短而简单。

  <style type="text/css" media="screen">
    #scheduler_here table tr td, #scheduler_here table tr th
    {
        padding: 0;
    }
    #scheduler_here *, #scheduler_here *:before, #scheduler_here *,after {
        box-sizing: content-box;
       -webkit-box-sizing: content-box;
    }
    </style>

Answer 1

如果您使用 Foundation 4 (F4)，您可以选择基础 CSS 的哪些部分由 Compass / Sass 生成。进行更改后不要忘记运行 compass compile。

编辑 -> sass/app.scss

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
// @import "foundation";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
@import "foundation/components/visibility";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
@import "foundation/components/button-groups"; // *requires components/buttons
@import "foundation/components/dropdown-buttons"; // *requires components/buttons
@import "foundation/components/split-buttons"; // *requires components/buttons
@import "foundation/components/flex-video";
@import "foundation/components/section";
@import "foundation/components/top-bar";  // *requires components/grid
@import "foundation/components/orbit";
@import "foundation/components/reveal";
@import "foundation/components/joyride";
@import "foundation/components/clearing";
@import "foundation/components/alert-boxes";
@import "foundation/components/breadcrumbs";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/side-nav";
@import "foundation/components/sub-nav";
@import "foundation/components/switch";
@import "foundation/components/magellan";
// @import "foundation/components/tables";  // prevent Table CSS from loading
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/dropdown";

另一个选项，如果您知道如何更改填充、边框等以匹配其他包含的元素，您可以编辑 _settings.scss，第 1064 - 1097 行，其中包含表格变量。我在这里显示未修改的变量以说明可以更改的内容。

//
// Table Variables
//

//// Background color for the table and even rows

// $table-bg: #fff;
// $table-even-row-bg: #f9f9f9;

//// Table cell border style

// $table-border-style: solid;
// $table-border-size: 1px;
// $table-border-color: #ddd;

//// Table head styles

// $table-head-bg: #f5f5f5;
// $table-head-font-size: emCalc(14px);
// $table-head-font-color: #222;
// $table-head-font-weight: bold;
// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);

//// Row padding and font styles

// $table-row-padding: emCalc(9px) emCalc(10px);
// $table-row-font-size: emCalc(14px);
// $table-row-font-color: #222;
// $table-line-height: emCalc(18px);

//// Display and margin of tables

// $table-display: table-cell;
// $table-margin-bottom: emCalc(20px);

如果您有时间并想更进一步，您可以将foundation/components/tables.scss 文件拉入您的本地项目，随意修改它并链接到上述修改后的版本。您可以通过运行gem which zurb-foundation 找到原始文件，我已经安装了rvm，所以我从zurb-foundation-4.1.5 目录中得到类似~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb 的文件，该文件位于scss/foundation/components 并称为_tables.scss