0

我有一个需要 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>
4

1 回答 1

0

如果您使用 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.scss1064 - 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您可以通过运行I have installed with来找到原始文件,rvm因此我可以~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rbzurb-foundation-4.1.5文件所在的目录中获得类似的内容scss/foundation/components并调用_tables.scss

于 2013-05-13T03:18:32.627 回答