相同样式,同个浏览器,效果不一样求解~_html/css_WEB-ITnose
本地效果图如下图:
传至服务器效果图如下图:
图片可能有点大,请大家在新窗口看看图片~麻烦了
浏览器:火狐 版本:3.6.28
这里出现2个区别。
第一个区别:
本地效果图中,除标题行,其余行都没有设置TD边框;而在服务器效果图中,却显示有的行有边框,有的行则没有。
对应代码:
<table id="bSortTable" width="2045" class="TableList"><tr id="tritem" style="background: #FFFFFF; border-bottom: 1px #cccccc solid;" onmouseover="selecty_sep(this)" onmouseout="selectz_sep(this)" runat="server"> <td> <asp:CheckBox ID="z" runat="server" onclick="AddID_sel(this)" /> <asp:HiddenField ID="rep_hid_ID" runat="server" Value='<%# Eval("OrderID") %>' /> <asp:HiddenField ID="rep_hid_Name" runat="server" Value='<%# Eval("OrderCode") %>' /> </td> <td align="center"> <a style=" color:Teal; font-weight:bold;" href="OrderView.aspx?orderid=<%# Eval("OrderID") %>"><%# Eval("OrderCode")%></a> </td> <td align="center"> <%# Eval("BeginStation")%> </td> <td align="center"> <%# Eval("ArriveStation")%> </td> <td align="center"> <%# DateTime.Parse(Eval("OrderDate").ToString()).ToShortDateString()%> </td> <td align="center"> <%# Eval("ShipperName")%> </td> <td align="center"> <%# Eval("ConsigneeName")%> </td> <td align="center"> <%# Eval("ConsignPhoneNum")%> </td> <td align="center"> <%# GetCargoDetail(Eval("OrderID").ToString())%> </td> <td align="center"> <%# Eval("Freight")%> </td> <td align="center"> <%# Eval("ReceiptCost")%> </td> <td align="center"> <%# Eval("DeliverCost")%> </td> <td align="center"> <%# Eval("Insurance")%> </td> <td align="center"> <%# Eval("OtherCost")%> </td> <td align="center"> <%# Eval("TotalCost")%> </td> <td align="center"> <%# Eval("PayMent")%> </td> <td align="center"> <%# Eval("CarrierName")%> </td> <td align="center"> <%#GetLoadingCarNum(Eval("OrderID").ToString(), Eval("LoadingCarNum").ToString(), Eval("State").ToString())%> <%--<a href="javascript:void(0)" onclick="event.cancelBubble=true;OpenOrderLoadingInfo(event,'<%# Eval("OrderID") %>');"" title="订单装车详情"> <%# Eval("LoadingCarNum")%></a>--%> </td> <td align="center"> <%#GetSendCarNum(Eval("OrderID").ToString(), Eval("SendCarNum").ToString(), Eval("State").ToString())%> <%--<a href="javascript:void(0)" onclick="event.cancelBubble=true;OpenOrderSendInfo(event,'<%# Eval("OrderID") %>');"" title="订单发车详情"> <%# Eval("SendCarNum")%></a>--%> </td> <td align="center"> <a href="javascript:void(0)" onclick="event.cancelBubble=true;OpenOrderState(event,'<%# Eval("OrderID") %>','<%# Eval("State") %>');" title="订单状态详情"> <%# GetDesByState(Eval("State").ToString())%></a> </td> <td align="center"> <asp:Literal ID="btn_prev" runat="server"></asp:Literal> <asp:Literal ID="btn_next" runat="server"></asp:Literal> <asp:Literal ID="btn_sign" runat="server"></asp:Literal> <asp:ImageButton ID="btn_signback" ToolTip="回单取消" ImageUrl="../../images/rep_signback.gif" CommandName="SignBack" CommandArgument='<%# Eval("OrderID") %>' runat="server" /> </td> </tr>
/* 列表型表格样式 */.TableList{ border:1px #cccccc solid; line-height:21px; font-size:9pt; border-collapse:collapse; padding:3px;}.TableList td{ padding:3px; height:26px;}/* 订单跟踪list专用 */.TableList td .tableDItim{ padding:3px; border:1px teal solid;}.TableList .TableHeader td,.TableList td.TableHeader{ height:30px !important; height:32px; background:#E7F1FA; border-bottom:1px #9cb269 solid; border-right:1px #9cb269 solid; font-weight:bold; text-align:center; color:#383838; padding:0px;}/* 订单跟踪list专用 */.TableList .TableHeader .tableDHeader{ height:30px !important; height:32px; background:#E7F1FA; border-bottom:0px #9cb269 solid; border-right:0px #9cb269 solid; font-weight:bold; text-align:center; color:#383838; padding:0px;}
第二个区别:
本地效果图中,货物,包装,件数,重量,体积这5个列,是有table边框的;而在服务器效果图中,则没有。
相关代码:
/// <summary> /// 获取货物详情 /// </summary> /// <param name="orderid"></param> /// <returns></returns> public string GetCargoDetail(string orderid) { string des = "<table class=\"tableDItim\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"; OrderBLL ob = new OrderBLL(); DataSet ds = ob.GetOrderDetailInfoByBID(orderid); string detail = ""; foreach (DataRow row in ds.Tables[0].Rows) { detail += "<tr>"; detail += "<td style=\"width: 105px;\" align=\"center\">"; detail += row["CargoName"].ToString(); detail += "</td>"; detail += "<td style=\"width: 65px;\" align=\"center\">"; detail += row["CargoPackMent"].ToString(); detail += "</td>"; detail += "<td style=\"width: 75px;\" align=\"center\">"; detail += row["PackagesNum"].ToString(); detail += "</td>"; detail += "<td style=\"width: 75px;\" align=\"center\">"; detail += row["Weight"].ToString(); detail += "</td>"; detail += "<td style=\"width: 75px;\" align=\"center\">"; detail += row["Volume"].ToString(); detail += "</td>"; detail += "</tr>"; } if (detail == "") { detail = "<tr><td style=\"width: 105px;\"></td><td style=\"width: 65px;\"></td><td style=\"width: 75px;\"></td><td style=\"width: 75px;\"></td><td style=\"width: 75px;\"></td></tr>"; } des += detail; des += "</table>"; return des; }
另外还要说的一个是,虽然用火狐打开服务器上的项目时,不理想。但是用IE8打开服务器的,却和 用火狐打开本地的,效果一样。
请样式高手帮忙看看,谢谢啦。
回复讨论(解决方案)
有没有设定bassurl,类似的我也碰到过一次。
看看哪个border-right的影响

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
