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