不同浏览器的CSS问题 [英] CSS issue for diffrent browsers

问题描述

大家好

我已经在不同的网页中使用了列表视图作为列表视图，为此我制作了一个CSS类，其代码如下.....

Hello all

i have used list view in diffrent web pages for list view i made a CSS class for that the code is as follows.................

/** Listview Table **/
.list { background-color: #ffffff; border:solid 3px #a5a4bd;}
.list-title-bar { background:#8988a5 url(images/title-bg.gif); border-bottom:solid 1px #57566f; height:28px;
           line-height:28px; margin:0px; padding:0px 0px 0px 5px; color:#fff; font-size:1.25em; }
.list-title { padding-bottom:4px; color:#990000; font-size:1.25em; font-weight:bold; float:left; width:379px;}
.list-actions { float:right; text-align:right; width:320px;}
.list table { margin:0px; border-collapse:collapse; width:100%; }
.list tr { }
.list tr.even { background-color:#f0f0f0; }
.list th { background:#e9e9eb url(images/header-bg.gif); height:24px; padding-left:6px; padding-right:6px; color:#666666; text-align:left; vertical-align:middle }
.list th.first { background:#e9e9eb url(images/header-bg.gif) -3px 0px; }
.list th.buttons { width:60px; vertical-align:middle; }
.list td { padding:2px 6px 2px 6px; border-bottom:solid 1px #eae9; idth: 20px; }
.list td { padding:2px 6px 2px 6px; border-bottom:solid 1px #eae9e1; color:#222222; vertical-align: top;
    margin-left: 80px;
}

.list .nav-button input { width:auto; height:auto; }
 /* pager */
.list #pager .pager td { height:40px; }
.list #pager .pager .commands { height:40px; padding:4px 0px 0px 25px;}
.list #pager .pager .info { padding:4px 25px 0px 0px; text-align:right; }
/** Other classes **/
.hidden { display:none; visibility:hidden; }
.error { color:#ff0000; }
#clear {clear:both;}
/*.list-button { display:inline; float:left; position:relative; margin-left:2px; margin-right:2px; width:40px; font-size: .9em;}*/
.list-button { background-position: 0% 50%; background-repeat: no-repeat; padding-top: 2px;
               width:25px; float:left; font-size: .9em; height:18px; }
/** Icons **/
.icon { background-position: 0% 50%; background-repeat: no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 3px;font-size: .9em; line-height:22px;}
/**.icon-add { background-image: url(images/add.png); }**/
.icon-add{ background-image:url(images/add-b.png);}
.icon-back{background-image:url(images/back.png);}
.icon-insert { background-image: url(images/insert.png); }
.icon-edit   { background-image: url(images/edit.png);  }
.icon-cancel { background-image: url(images/cancel.png); }
.icon-update { background-image: url(images/update.png); }
.icon-delete { background-image: url(images/delete.png); }
.icon-clear  { background-image: url(images/clear.png); }
.icon-select  { background-image: url(images/select.png); }
.icon-first  { background-image: url(images/first.gif); }
.icon-prev   { background-image: url(images/prev.gif); }
.icon-next   { background-image: url(images/next.gif); }
.icon-last   { background-image: url(images/last.gif); }
.icon-phone  { background-image: url(images/phone.png); }
.icon-print  { background-image: url(images/print.png); }
.icon-edit-b   { background-image: url(images/edit-b.png);  }
.icon-cancel-b { background-image: url(images/cancel-b.png); }
.icon-update-b { background-image: url(images/update-b.png); }
.icon-delete-b { background-image: url(images/delete-b.png); }

#InsertRow {display:none;}
#InsertRow td {background-color:#dee3ff; border:none;}
#EditRow td {background-color:#dee3ff; border:none;}
#SelectedRow td {background-color:#dee3ff; border:none;}

我在列表视图中为新条目插入插入模板"
所以问题是
当我不添加新条目时，当我单击链接以创建新条目时，列表视图在mozilla t中是正确的，因为将插入所有模板，并且将整个列表视图变为"br/> 仅在IE中的mozilla bt中会发生这种情况.
请帮我该怎么办
我非常讨厌这个.

谢谢和问候
subiya

i insert a "insert template" for the new entry in the list view
so the issue is
when i dont add new entry the list view is proper in mozilla t when i click on the link to made new entry the coloumn in which insert template will be appear become streched becouse of tha all coloumn become streched and the whole list view become streched
this happens onlly in mozilla bt in IE it is proper.
plz help me out what should i do
i mstucking in this vry badly.

thanks and regard
subiya

推荐答案

您应该使用Mozilla fire bug来动态更改CSS并检查导致未对齐的原因.找到原因后，您应该在IE开发人员工具栏中键入相同的更改，然后检查兼容性.这是解决跨浏览器问题的最快方法，就像您提到的那样.

You should use Mozilla fire bug to dynamically change the CSS and check what is causing the misalignment. Once found the cause you should key in the same change in IE developer toolbar and check for the compatibility. This is the quickest way to fix the cross-browser issues, like the one you mentioned.

这篇关于不同浏览器的CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！