我有一个样式表用于ASP.Net站点中的多个CSS页面.其中两个页面的列表几乎完全相同.
例如
所有页面的样式:
li { padding-left:40px; text-indent:-44px; }
列表样式需要单独的样式:
.customlistitem {padding-left:90px; text-indent:0px; }
然后在实际页面中需要略有不同风格的列表:
<li class="customlistitem">
问题是customlistitem选择器没有覆盖样式表中的样式.为什么是这样 ？
我正在创建一个联系页面，并使用 div 显示公司每个分支机构的地址和名称。我使用带有徽标背景图像的容器 div，并将文本和地址放置在 div 顶部。问题是背景图像没有填充整个 div，即使我将 div 的宽度和高度设置为图像也是如此。
这是我的 HTML
<div class="divContactImg">
<div class="branchHeader">Durban</div>
<div class="branchText">82 Joe Slovo Street</div>
<div class="branchText">Durban</div>
</div>
还有我的CSS：
.divContactImg {
background-image: url('http://image.png');
width:225px;
height:80px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
float:left;
text-align:left;
margin-left: 5px;
border-radius:5px;
}
.branchHeader {
font-size: 24px;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
}
.branchText {
font-size: 12px;
color:#cecece;
margin-left: 10px;
text-transform:uppercase;
}
我的图像大小为 225 x 80 像素，但是当它在那里渲染时，它会在高度和宽度上添加额外的两个像素，并且看起来 div 的顶部和左侧内部有 2 个像素的差异，几乎就像有正在应用一些填充
我正在创建一个HTML电子邮件,我很难在Outlook和Gmail中呈现图像.我有通常的问题,即在Gmail的表行之间添加了额外的空间,但是将块分配给图像的显示样式,如下所示:
style="display:block;"
不起作用.我设法找到的唯一修复是在所有td元素上将行高设置为零:
<td style="line-height=0">
但是当我这样做时,Outlook会切断我图像的所有顶部!我还可以使用其他任何修复方法吗？
- - 编辑 - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email <a href="" style="color:White;">click here</a>
</td>
</tr> …