CSS zurb的基础和dhtmlx

Question

我有一个项目，需要zurb基础的CSS和DHTML调度和CSS不是很好玩。

特别有两个问题。

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

更复杂一些是在日历上的约会。 这就是它的样子。注意侧面菜单中的孔。

默认情况下是问题的样式。

，我需要删除它们正确渲染页面。

我们正在使用的基础SCSS版本，但我不是很熟悉它的能力和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），您可以选择由Compass/Sass生成基础CSS的哪些部分。在进行更改后，不要忘记运行指南针编译。

编辑 - >上海社会科学院/ 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); 

如果你有时间，想走得更远，就可以拉动基础/组件/ tables.scss文件到您的本地项目，修改它，只要你喜欢，并链接到修改后的版本如上。您可以通过运行gem which zurb-foundation我已经安装了rvm所以我从zurb-foundation-4.1.5目录中的文件位于scss/foundation/components像~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb原始文件，并呼吁_tables.scss