jQuery MiniUI

标题: mini-fit的问题 [打印本页]
作者: kevinyau    时间: 2012-10-12 13:44:47     标题: mini-fit的问题

在一个页面body区域包含 <style type="text/css"></style>
会影响mini-fit的布局（页面下方有空白），不知道这个能不能解决
作者: niko    时间: 2012-10-12 13:46:03

这个是不会有空白的。
你参考我们的fit示例：
http://www.miniui.com/demo/fit/fit.html
作者: kevinyau    时间: 2012-10-12 14:22:26

本帖最后由 kevinyau 于 2012-10-12 14:25 编辑
niko 发表于 2012-10-12 13:46
这个是不会有空白的。
你参考我们的fit示例：
http://www.miniui.com/demo/fit/fit.html ...

body区域没有style确实是不会有空白（html规范style应该放在head区域）

你把<style type="text/css"></style>放到body区域试

作者: niko    时间: 2012-10-12 16:14:41

测试了，没有问题。
你更新下版本试试。
作者: kevinyau    时间: 2012-10-12 18:06:46

本帖最后由 kevinyau 于 2012-10-12 18:09 编辑
niko 发表于 2012-10-12 16:14
测试了，没有问题。
你更新下版本试试。

那就奇怪了哦，我放在body区域就有问题，移到head区域就没问题
用的IE10，兼容模式也是这样
用chrome测试也是这样
作者: niko    时间: 2012-10-12 18:53:12

不要用兼容模式，用标准模式。
你基于我们标准示例测试。
作者: kevinyau    时间: 2012-10-13 08:27:24

niko 发表于 2012-10-12 18:53
不要用兼容模式，用标准模式。
你基于我们标准示例测试。

我在IE 10标准模式和兼容模式下测试都是这样Chrome也是，我就用你说的那个示例的代码吧
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.      <title>Fit Layout</title>
  6.      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7.      <link href="../demo.css" rel="stylesheet" type="text/css" />
  8.      <script src="../../scripts/boot.js" type="text/javascript"></script>
  9. </head>
  10. <body>

  12.      <style type="text/css">
  13.          body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: visible; }
  14.      </style>
  15.      <div class="mini-toolbar" style="padding: 2px; border-bottom: 0;">
  16.          <table style="width: 100%;">
  17.              <tr>
  18.                  <td style="width: 100%;">
  19.                      <a class="mini-button" iconcls="icon-save" plain="true">保存</a>
  20.                      <a class="mini-button" iconcls="icon-close" plain="true">关闭</a>
  21.                      <span class="separator"></span>
  22.                      <a class="mini-button" iconcls="icon-reload" plain="true">刷新</a>
  23.                  </td>
  24.                  <td style="white-space: nowrap;">
  25.                      <label style="font-family: Verdana;">名称: </label>
  26.                      <input class="mini-textbox" />
  27.                      <a class="mini-button" iconcls="icon-search" plain="true">查询</a>
  28.                  </td>
  29.              </tr>
  30.          </table>
  31.      </div>
  32.      <!--撑满页面-->
  33.      <div class="mini-fit">

  35.          <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;"
  36.              url="../data/AjaxService.aspx?method=SearchEmployees" idfield="id"
  37.              sizelist="[5,10,20,50]" pagesize="10">
  38.              <div property="columns">
  39.                  <div type="indexcolumn"></div>
  40.                  <div field="loginname" width="120" headeralign="center" allowsort="true">员工帐号</div>
  41.                  <div field="name" width="120" headeralign="center" allowsort="true">姓名</div>
  42.                  <div field="gender" width="100" renderer="onGenderRenderer" align="center" headeralign="center">性别</div>
  43.                  <div field="salary" width="100" allowsort="true">薪资</div>
  44.                  <div field="age" width="100" allowsort="true">年龄</div>
  45.                  <div field="createtime" width="100" headeralign="center" dateformat="yyyy-MM-dd" allowsort="true">创建日期</div>
  46.              </div>
  47.          </div>

  49.      </div>

  51.      <script type="text/javascript">

  53.          mini.parse();

  55.          var grid = mini.get("datagrid1");

  57.          grid.load();

  59.      </script>

  61. </body>
  62. </html>
复制代码
只是把
  1. <style type="text/css">
  2. body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: visible; }
  3. </style>
复制代码
移到从head区域移到body区域

作者: kevinyau    时间: 2012-10-13 08:33:38

niko 发表于 2012-10-12 18:53
不要用兼容模式，用标准模式。
你基于我们标准示例测试。

上传一张截图
[attach]747[/attach]
作者: kevinyau    时间: 2012-10-13 08:37:20

niko 发表于 2012-10-12 18:53
不要用兼容模式，用标准模式。
你基于我们标准示例测试。

再来张chrome的截图

[attach]748[/attach]
作者: niko    时间: 2012-10-14 08:21:12

我们也测试到了，已修复。
下周一更新。



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2