"Decoration Text" و ": بعد" العنصر الزائف [مكررة

StackOverflow https://stackoverflow.com/questions/1180910

  •  19-09-2019
  •  | 
  •  

سؤال

هذا السؤال لديه بالفعل إجابة هنا:

مثل كل الأشخاص الذين يفكرون بشكل صحيح، أكره النقر فوق ارتباط واكتشف بعد فوات الأوان أنه يؤدي إلى ملف PDF أو Microsoft Office من Microsoft. اعتقدت أنني سأصبح الحياة أسهل بعض الشيء بالنسبة للأشخاص من خلال عرض أيقونة صغيرة بجانب الروابط التي تؤدي إلى مثل هذه الملفات. مع IE8 يدعم أخيرا :after العنصر الزائدي، اعتقدت أن إعلان CSS سيكون بسيطا إلى حد ما:

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

في IE8، هذا يعمل بشكل جيد. في فايرفوكس والكروم، رغم ذلك، text-decoration: none يتم تجاهله، وتمتد التسطير بشكل غير مناسب عبر الجزء السفلي من الأيقونة. هل هناك طريقة لإصلاح هذا دون "الغش" باستخدام إضافي <span> بطاقة شعار؟

هل كانت مفيدة؟

المحلول

أنا أفعل ذلك بطريقة مختلفة، باستخدام محددات السمة, صورة خلفية وحشو (كما اقترح شاندي أيضا):

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

هذا يعمل في IE7 أيضا.

إليك مثال كامل

في IE7 لن يكون أيقونة PDF مرئية لأنها لا تفهم البيانات URIS:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

نصائح أخرى

ماذا عن استخدام صورة الخلفية؟ 

a.file_pdf {
    background: url('/images/pdf.png') no-repeat right;
    padding-right: 30px;
    ...
}

تعديل

لا ينبغي أن يكون لدى اختبار وتشغيله تماما على FF 3.5، أي مشكلة في معظم المتصفح نظرا لاستخدام تقنية استبدال الصور التقليدية فقط.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top