jQuery UI主题化-CSS大小差异_Jquery_Css_Jquery Ui_Jquery Plugins

jQuery UI主题化-CSS大小差异

jquery css jquery-ui jquery-plugins

jQuery UI主题化-CSS大小差异,jquery,css,jquery-ui,jquery-plugins,Jquery,Css,Jquery Ui,Jquery Plugins,当使用网站上的示例（）时，事情看起来很棒。但是，当我将代码和主题放入我的应用程序中时，大小就不正常了（我正试图利用Redmond主题）有没有办法解释为什么这些样品看起来如此不同？在我构建的应用程序中，只有一个CSS引用用于Redmond主题。。。下面这些图像正是它们在浏览器中呈现的方式我的应用程序： jQuery UI示例：我的申请代码： <div> <asp:TextBox ID="txtDateSample" runat="server"></

当使用网站上的示例（）时，事情看起来很棒。但是，当我将代码和主题放入我的应用程序中时，大小就不正常了（我正试图利用Redmond主题）

有没有办法解释为什么这些样品看起来如此不同？在我构建的应用程序中，只有一个CSS引用用于Redmond主题。。。下面这些图像正是它们在浏览器中呈现的方式

我的应用程序：

jQuery UI示例：

我的申请代码：

<div>
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#<%= txtDateSample.ClientID %>').datepicker({
            showButtonPanel: true,
            showOn: 'button',
            buttonImage: '../Graphics/Icons/calendar.png',
            buttonImageOnly: true
        });
    });
</script>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>


$（函数（）{
$（'#'）。日期选择器({
showButtonPanel：是的，
showOn:'按钮'，
buttonImage:“../Graphics/Icons/calendar.png”，
buttonImageOnly:true
});
});

分区的Firebug视图：

<div>
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#<%= txtDateSample.ClientID %>').datepicker({
            showButtonPanel: true,
            showOn: 'button',
            buttonImage: '../Graphics/Icons/calendar.png',
            buttonImageOnly: true
        });
    });
</script>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>

这种事以前常发生在我身上。这是因为您的某些样式无意中影响了calendar div。获取Firebug并查看应用于日历的样式。然后编辑主题以覆盖样式正在执行的任何操作

编辑：

<div>
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#<%= txtDateSample.ClientID %>').datepicker({
            showButtonPanel: true,
            showOn: 'button',
            buttonImage: '../Graphics/Icons/calendar.png',
            buttonImageOnly: true
        });
    });
</script>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>

您要查找的部分不是生成的HTML，尽管这很重要，但更多的是实际应用的样式：

（来源：）

您将看到正在应用的样式，而已指定但未应用的样式将被删除。您可能会在此窗口中看到一些样式。他们很可能是罪魁祸首。通过使它们更具体来修复它们，您的日历应该可以很好地运行。

当事情比您预期的要小时，一个好的假设是某种百分比/比例大小是递归发生的，也就是说，您得到了

.foo {width: 80%;}

在某个地方，已经应用了两次或更多次，这意味着您的宽度最终为80%的80%的80%。

在index.php页面或主页或每页中添加此代码

<head>
<style>
    body{
        font-size: 62.5%; /* it is necessary for jquery ui */
        }
</style>
</head>


身体{
字体大小：62.5%；/*对于jquery ui是必需的*/
}

使用jquery ui时，管理字体或标记的大小是一个合法的编码过程。

我想知道这是否就是它们提供“编辑主题”功能的原因。修改了字体大小，这似乎很管用。谢谢。今晚晚些时候我再看一遍。我相信这是主题的字体大小设置。1.1em vs.小型。以下是解决方案